Question

我想知道如何使用Javascript API v3为Google地图添加多个标记。

我尝试了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>

有人可以解释为什么这对我不起作用吗？

Answer 1

这个问题已经有几个月了，但我注意到它仍然没有答案。我想OP已经找到了解决这个问题的方法，但是为了完整起见，让我尝试一下答案。

我可以在上面的代码中发现一些主要问题：

首先，在properties定义之前，您尝试将setMarkers()数组传递给properties函数。因此，setMarkers()将收到undefined第二个参数，这就是您的地图上没有显示任何内容的原因。
然后，您在for in循环中拥有a very common closure problem。封闭在闭包中的变量共享相同的单一环境，因此在调用click的{{1}}回调时，循环将运行并且addListener变量将被保留指向循环结束时的最后一个值。
此外，您在数组文字中有一个悬空逗号，这可能会导致某些浏览器出现语法错误。

要解决第一个问题，只需在调用i之前定义properties数组：

setMarkers()

然后，您可以使用函数工厂解决更多闭包的闭包问题：

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];

setMarkers(map, properties);

如果你不熟悉闭包的工作方式，这可能是一个非常棘手的话题。您可以查看以下Mozilla文章以获得简要介绍：

Working with Closures

然后您可能需要确保删除数组文字中的悬空逗号：

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

此外，请注意，由于var properties = [ ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'] // no comma ];数组中只有一个元素，因此您只能在地图上获得一个标记。我不确定是否为了这个例子删除了其他元素，但如果不是，只需添加更多这样的位置：

properties

多个标记未在使用Javascript API v3的Google地图中显示？

1 个答案: