Boostrap-table如何与google的这个函数结合上

clipboard.png

clipboard.png

clipboard.png

之前的google的MarkerClusterer显示效果是在html创建dom显示的,现在我想获取数据跟Boostrap-table结合点击跟随图片位置
这个代码是单击跳转的重点.

google.maps.event.addDomListener(title, 'click', fn);

Boostrap-table 部分

<table id="table" class="table table-hover table-striped">
    <thead>
        <tr>
            <th class="bs-checkbox " style="width: 36px; ">
                <div class="th-inner ">
                </div>
                <div class="fht-cell">
                </div>
            </th>
            <th style="">
                <div class="th-inner ">
                    photo_id
                </div>
                <div class="fht-cell">
                </div>
            </th>
            <th style="">
                <div class="th-inner ">
                    photo_title
                </div>
                <div class="fht-cell">
                </div>
            </th>
            <th style="">
                <div class="th-inner ">
                    photo_time
                </div>
                <div class="fht-cell">
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-index="0">
            <td class="bs-checkbox">
                <input data-index="0" name="btSelectItem" type="radio">
            </td>
            <td style="">
                1
            </td>
            <td style="">
                20171006224154_n2pSAts3.jpg
            </td>
            <td style="">
                2017-02-16 16:21
            </td>
        </tr>
        <tr data-index="1">
            <td class="bs-checkbox">
                <input data-index="1" name="btSelectItem" type="radio">
            </td>
            <td style="">
                2
            </td>
            <td style="">
                20171006224154_EM5BOs5h.jpg
            </td>
            <td style="">
                2017-02-17 09:40
            </td>
        </tr>
        <tr data-index="2">
            <td class="bs-checkbox">
                <input data-index="2" name="btSelectItem" type="radio">
            </td>
            <td style="">
                3
            </td>
            <td style="">
                20171006224154_h6sIpmEy.jpg
            </td>
            <td style="">
                2017-02-18 11:47
            </td>
        </tr>
        <tr data-index="3">
            <td class="bs-checkbox">
                <input data-index="3" name="btSelectItem" type="radio">
            </td>
            <td style="">
                4
            </td>
            <td style="">
                20171006224155_JA8X1Zwz.jpg
            </td>
            <td style="">
                2017-02-20 14:31
            </td>
        </tr>
        <tr data-index="4">
            <td class="bs-checkbox">
                <input data-index="4" name="btSelectItem" type="radio">
            </td>
            <td style="">
                5
            </td>
            <td style="">
                20171006224155_8P5fZV5A.jpg
            </td>
            <td style="">
                2017-02-23 15:10
            </td>
        </tr>
        <tr data-index="5">
            <td class="bs-checkbox">
                <input data-index="5" name="btSelectItem" type="radio">
            </td>
            <td style="">
                6
            </td>
            <td style="">
                20171006224155_rJdvWIE0.jpg
            </td>
            <td style="">
                2017-02-24 11:31
            </td>
        </tr>
        <tr data-index="6">
            <td class="bs-checkbox">
                <input data-index="6" name="btSelectItem" type="radio">
            </td>
            <td style="">
                7
            </td>
            <td style="">
                20171006224156_tA58GjVA.jpg
            </td>
            <td style="">
                2017-02-24 11:52
            </td>
        </tr>
        <tr data-index="7">
            <td class="bs-checkbox">
                <input data-index="7" name="btSelectItem" type="radio">
            </td>
            <td style="">
                8
            </td>
            <td style="">
                -
            </td>
            <td style="">
                1970-01-01 08:00
            </td>
        </tr>
        <tr data-index="8">
            <td class="bs-checkbox">
                <input data-index="8" name="btSelectItem" type="radio">
            </td>
            <td style="">
                9
            </td>
            <td style="">
                20171006224156_q7hU8BLp.jpg
            </td>
            <td style="">
                2017-03-03 18:12
            </td>
        </tr>
        <tr data-index="9">
            <td class="bs-checkbox">
                <input data-index="9" name="btSelectItem" type="radio">
            </td>
            <td style="">
                10
            </td>
            <td style="">
                20171006224157_j74fngNH.jpg
            </td>
            <td style="">
                2017-03-05 15:47
            </td>
        </tr>
    </tbody>
</table>

js部分

  for (var i = 0; i < res.length; i++) {
    var titleText= speedTest.pics[i].photo_title;
//  alert(data111);
    if (titleText === '') {
      titleText = 'No title';
    }

    var item = document.createElement('li');
    var title = document.createElement('tr');
    
//  var table =jq("input[data-index='"+i+"']")[0];
//  var table=$table[i];
    title.href = '#';
    title.className = '';
    title.innerHTML = 1;

console.log(title);
    item.appendChild(title);
    panel.appendChild(item);


    var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
        speedTest.pics[i].longitude);

    var imageUrl = 'lib/img/markers/photo.png';
    var markerImage = new google.maps.MarkerImage(imageUrl,
        new google.maps.Size(32, 37));

    var marker = new google.maps.Marker({
      'position': latLng,
      'icon': markerImage
    });

    var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
    google.maps.event.addListener(marker, 'click', fn);
    google.maps.event.addDomListener(title, 'click', fn);
    speedTest.markers.push(marker);
    
  }

  window.setTimeout(speedTest.time, 0);
};
阅读 2.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题