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

发布于 2022-09-06 00:10:34 字数 7572 浏览 17 评论 0

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);
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文