带有网址的谷歌地图标记

Question

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

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

我使用 [1] 和 [2] 作为 lat long，但我想使用 [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;
             });    

 })