javascript - 使用 Google Maps API,如何在当前缩放级别上用所有可见标记填充 html 表格
问题描述
我有一个空的 html 表和一个带有一些标记的谷歌地图。所有标记都存储在一个数组中。当用户放大地图时,标记位置应填满空表。那么,我将如何实现这一目标?
<div id="MapRender"></div>
<table>
<thead>
<tr>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx"></script>
<script type="text/javascript">
function LoadGoogleMAP() {
var mapProp = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('MapRender'), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.592360,76.733660),
map: map,
optimized: false,
title: 'Place1'
})
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(22.174507, 88.777137),
map: map,
optimized: false,
title: 'Place2'
})
}
google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);
</script>
解决方案
推荐阅读
- javascript - 无法在 d3 图表中使用符号
- angular - 选项卡集,事件触发太频繁
- javascript - build:android 和 build:android -t apk 有什么区别?
- botframework - 如何在bot框架v4中形成英雄卡轮播
- python - 需要帮助进行网页抓取并使用 csv 将其保存到 excel
- android - 什么时候使用MaterialToolbar和androidx Toolbar以及两者的区别?
- jquery - 如何使用 Jquery 正确检查您的复选框?
- google-apps-script - 如何使用 GMail 查询语言过滤没有附件的邮件?
- postgresql - 是否值得在 postgres 中使用全文搜索来搜索名称、用户名、电子邮件等短文本?
- c++ - 在 pthread_cancel 之后“终止调用而没有活动异常”