使用Javascript API v3在Google Maps中没有显示多个标记?
作者:互联网
我想知道如何使用Javascript API v3为Google Maps放置多个标记.
我尝试过发布here的解决方案,但由于某些原因它对我不起作用:
var directionDisplay;
function initialize() {
var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, properties);
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
function setMarkers(map, buildings) {
var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var bounds = new google.maps.LatLngBounds;
for (var i in buildings) {
var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
bounds.extend(myLatLng);
var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
}
map.fitBounds(bounds);
}
}
</script>
谁能解释一下为什么这对我不起作用?
解决方法:
这个问题已经有几个月了,但是我注意到它仍然没有答案.我想OP已经找到了解决这个问题的方法,但是为了完整起见,让我尝试一个答案.
我可以在上面的代码中发现一些主要问题:
>首先,您要在定义属性之前尝试将properties数组传递给setMarkers()函数.因此,setMarkers()将为第二个参数接收到undefined,这就是为什么地图上没有显示任何内容的原因.
>然后,您的in循环中包含a very common closure problem.闭包中包含的变量共享相同的单一环境,因此,在调用addListener的click回调时,循环将运行,并且i变量将指向循环结束时具有的最后一个值.
>此外,数组文字中有一个悬挂的逗号,在某些浏览器中可能导致语法错误.
要解决第一个问题,只需在调用setMarkers()之前定义属性数组即可:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
setMarkers(map, properties);
然后,您可以使用函数工厂使用更多闭包来解决闭包问题:
function makeClickCallback(buildings, i) {
return function() {
window.location = ('detail?b=' + buildings[i][3]);
};
}
for (var i in buildings) {
// ...
google.maps.event.addListener(marker, 'click',
makeClickCallback(buildings, i);
}
如果您不熟悉闭包的工作原理,那么这可能是一个棘手的话题.您可以查看以下Mozilla文章以获得简要介绍:
然后,您可能需要确保删除数组文字中的悬空逗号:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'] // no comma
];
此外,请注意,由于属性数组中只有一个元素,因此在地图上只会得到一个标记.我不确定此示例是否删除了其他元素,但是如果没有删除,则只需添加更多这样的位置:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['Another Location',50.505050,-75.505050,'Mjg5']
];
标签:google-maps,google-maps-api-3,javascript 来源: https://codeday.me/bug/20191210/2099631.html