javascript - 使用 Javascript API v3 的 Google map 中未显示多个标记？

Question

我想知道如何使用 Javascript API v3 为 Google map 放置多个标记。

我尝试了发布 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 已经找到了解决方法，但为了完整起见，让我尝试回答一下。

---

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

1. 首先，您试图在定义 properties 之前将 properties 数组传递给 setMarkers() 函数.因此，setMarkers() 将接收到第二个参数的 undefined，这就是 map 上没有显示任何内容的原因。

2. 然后，你有a very common closure problem在 for in 循环中。包含在闭包中的变量共享相同的单一环境，因此当 addListener 的 click 回调被调用时，循环将运行它的过程并且 i 变量将指向它在循环结束时的最后一个值。

3. 此外，数组字面量中有悬空逗号，这会导致某些浏览器出现语法错误。

---

要解决第一个问题，只需在调用 setMarkers() 之前定义 properties 数组:

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 文章进行简要介绍:

• Working with Closures

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

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

此外，请注意，由于您的 properties 数组中只有一个元素，因此您只会在 map 上获得一个标记。我不确定是否为了这个示例而删除了其他元素，但如果没有，只需添加更多位置，如下所示:

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ['Another Location',50.505050,-75.505050,'Mjg5']
];