Boostrap-table如何与google的这个函数结合上
之前的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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论