javascript - 带有 URL 的 Google map 标记

Question

我真的无法理解javascript，我知道这应该是一个非常简单的问题，但我卡住了..我有一个带有多个标记的谷歌地图，我添加了每个标记并且工作完美，但我想给它们链接。我的位置数组就像；

['http://website.com',36.598900,35.202094,'1']

我使用 [1] 和 [2] 作为经纬度，但我想使用 [0] 作为链接。我的循环工作完美，但每个标记的链接都指向最后一个项目的链接

这是我的循环

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image,
    url: locations[i][0],
  });

  google.maps.event.addListener(marker, 'click', function() {
    window.location.href = marker.url;
  });

}

我哪里出错了？

Answer 1

1/您需要在 marker = new google.maps.Marker({ ,

之前添加 var

因为，您现在使用 marker 作为全局变量，每次迭代都会覆盖该变量。

2/无论如何，最佳实践是将所有标记保存为对象属性。我们将此对象称为: mk ，那么您的标记将为 mk.marker0、mk.marker1...。

var mk={}; // this is nameSpace to save all markers
locations.map((loc,i)=>{
    mk['marker'+i] = new google.maps.Marker({
      position: new google.maps.LatLng(loc[1], loc[2]),
      map: map,
      icon: image,
      url: loc[0],
    });
    return mk['marker'+i];
}).forEach((marker)=>{
              google.maps.event.addListener(marker, 'click', function() {
                  window.location.href = marker.url;
             });    

 })