3

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

我尝试了此处发布的解决方案，但由于某种原因它对我不起作用：

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>

谁能解释一下为什么这对我不起作用？

4

1 回答 1

3

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

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

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

  2. 然后，您在该循环中遇到了一个非常常见的关闭问题。for in封闭在闭包中的变量共享相同的单一环境，因此在click调用来自 的回调时addListener，循环将运行，并且i变量将指向循环结束时的最后一个值。

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

要解决第一个问题，只需properties在调用之前定义数组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
];

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

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ['Another Location',50.505050,-75.505050,'Mjg5']
];
于 2010-08-08T23:44:35.477 回答