使用Javascript API v3在Google Maps中没有显示多个标记？

2019-12-10 05:47:03 阅读：258 来源： 互联网

标签：google-maps google-maps-api-3 javascript

我想知道如何使用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文章以获得简要介绍：

> Working with Closures

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用Javascript API v3在Google Maps中没有显示多个标记？