帶有多個標記的網址

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; 
     } 
    }