JavaScript-如何在Google Maps v3中的每个标记上添加编号？
作者：互联网
我想问大家有关如何使用JavaScript在Google Maps v3中的每个标记上动态添加数字的方法.例如,第一个标记是1,第二个标记是2,依此类推.在这种情况下,我的位置数据如下：
[
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(51.0000, 9.0000),
new google.maps.LatLng(51.0000, 9.0000),
new google.maps.LatLng(51.5142, -0.0931),
new google.maps.LatLng(51.5142, -0.0931),
new google.maps.LatLng(54.0000, -2.0000),
new google.maps.LatLng(51.6000, -1.2500),
new google.maps.LatLng(51.7500, -1.2500)
];
但是这些数据是动态变化的.因此,对于第一个纬度/经度,我将在第一个标记上给出数字1,在第二个标记上给出数字2,依此类推.此外,我还使用了每个标记图标：
"http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900"
我是否需要更改标记图标？
我真的需要您的建议或示例代码来解决此问题.请帮忙.非常感谢你的帮助.
解决方法:
您可以保留加星标的图钉图标,并在其旁边添加醒目的标签.这个标签可以说什么,但我只用一个数字表示.是MarkerWithLabel library(download here)
演示http://jsfiddle.net/yV6xv/21/
您还需要为其定义CSS.
.labels {
color: blue;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 25px;
border: 1px solid black;
white-space: nowrap;
}
并用MarkerWithLabel替换常规Marker：
for (var i = 0; i < point.length; i++) {
var marker = new MarkerWithLabel({
map: map,
position: point[i],
icon: pinImage,
shadow: pinShadow,
labelContent: i,
labelAnchor: new google.maps.Point(12, -5),
labelClass: "labels"
});
}
包含在HTML文件中
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
.labels {
color: blue;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 25px;
border: 1px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
...
标签：google-maps-api-3,google-maps-markers,javascript 来源： https://codeday.me/bug/20191201/2079216.html