url 的多个标记

Question

我正在使用 Google 地图 API，其中包含多个标记、鼠标悬停和信息窗口。它工作得很好。现在我想为点击上的每个标记添加一个单独的 URL。但是由于某种原因，所有标记总是打开最后一个URL。 - 可能是什么问题？

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

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

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

     // Add the markers and infowindows to the map
     for (var i = 0; i < locations.length; i++) {  
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        /*  title: locations[i][0],  */
  url: "http://www.stadtereignisse.ch/dokumentiert/",
         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(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));           
       
       
       
       iconCounter++;
       // We only have a limited number of possible icon colors, so we may have to restart the counter
       if(iconCounter >= iconsLength) {
        iconCounter = 0;
       }
     }

Answer 1

查看 click 处理程序和 mouseover 处理程序之间的区别。其中之一创建了一个闭包；另一个没有。您还需要为 click 创建一个闭包。

然而，有一种更简洁的方法可以代替函数即函数的复杂技术。只需将整个循环体移动到您从循环中调用的一个函数中。那么您将不需要在鼠标悬停（或单击任一）上进行额外的复杂操作。

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

最后，一些用户体验建议：我不推荐在鼠标悬停时打开信息窗口。您可能已经注意到，如果您为可见地图顶部附近的标记打开一个信息窗口，整个地图都会移动以将信息窗口显示在视图中。当鼠标悬停触发该移动时，这令人困惑和惊讶。信息窗口应该通过点击打开，而不是鼠标悬停。然后，如果您想在信息窗口文本中放置一个 link，您可以这样做。

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

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

url 的多个标记

multiple markers with url

api

google-maps-api-3

google-maps-markers