带有多个标记的网址

Question

我正在使用带有多个标记的Google Maps API &鼠标覆盖了& infowindows。它完美的作品。现在我想为CLICK上的每个标记添加一个单独的网址。但出于某种原因，所有标记始终打开最后一个URL。 - 可能是什么问题？

\t  // Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url 
 
\t  var locations = [ 
 
\t  ['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'], 
 

 
\t  ['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'], 
 

 
\t  ['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/'] 
 
\t  ];

\t  // Add the markers and infowindows to the map 
 
\t  for (var i = 0; i < locations.length; i++) { 
 
\t  var marker = new google.maps.Marker({ 
 
\t   position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
 
\t  /* title: locations[i][0], */ 
 
\t \t url: "http://www.stadtereignisse.ch/dokumentiert/", 
 
\t   map: map, 
 
\t   visible: true, 
 
\t   icon: icons[iconCounter] 
 
\t  }); 
 
\t 
 
\t  markers.push(marker); 
 
\t 
 

 
\t  
 
\t 
 
\t // CLICK (Allow each marker to have an info window) 
 
google.maps.event.addListener(marker, 'click', function() { 
 
    window.location.href = marker.url; 
 
}); 
 

 

 

 
    // MOUSEOVER  
 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); \t   
 
\t  
 
     \t 
 
\t  
 
\t  iconCounter++; 
 
\t  // We only have a limited number of possible icon colors, so we may have to restart the counter 
 
\t  if(iconCounter >= iconsLength) { 
 
\t  \t iconCounter = 0; 
 
\t  } 
 
\t  }

Answer 1

看看你click处理程序和你mouseover处理器之间的差异。其中之一造成封闭;另一个没有。您还需要为click创建关闭。

然而，并非函数返回函数的复杂技术，有一种更简洁的方法来完成它。只需将整个循环体移动到您从循环中调用的一个函数中即可。然后你不需要鼠标悬停的额外复杂功能（或者单击）。

此外，正如@ValLeNain指出的，您将marker.url设置为硬编码值，而不是每个标记的不同值，因此我将其更改为您想要的值。

最后，有点用户体验的建议：我不建议在mouseover上打开一个infowindow。正如您可能已经注意到的那样，如果您在可见地图顶部附近为标记打开infowindow，则整个地图将转换为将infowindow放入视图。当鼠标悬停触发该移动时，会令人困惑和惊讶。 Infowindows应该点击打开，而不是鼠标悬停。然后，如果您想在infowindow文本中添加链接，则可以这样做。

我没有在下面的代码中解决这个问题，但将留给你解决。

// Add the markers and infowindows to the map 
    for (var i = 0; i < locations.length; i++) { 
     addMarker(locations[i]); 
    } 

    function addMarker(location) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(location[2], location[3]), 
     title: location[0], 
     url: location[4], 
     map: map, 
     visible: true, 
     icon: icons[iconCounter] 
     }); 

     markers.push(marker); 

     // CLICK (Allow each marker to have an info window) 
     google.maps.event.addListener(marker, 'click', function() { 
      window.location.href = marker.url; 
     }); 

     // MOUSEOVER  
     google.maps.event.addListener(marker, 'mouseover', function() { 
     infowindow.setContent(location[0]); 
     infowindow.open(map, marker); 
     }); 

     iconCounter++; 
     // We only have a limited number of possible icon colors, so we may have to restart the counter 
     if(iconCounter >= iconsLength) { 
     iconCounter = 0; 
     } 
    }