Question

我正在使用带有多个标记的Google Maps API。鼠标悬停＆amp;信息窗口。它完美地运作。现在我想为CLICK上的每个标记添加单独的URL。但由于某种原因，所有标记始终打开最后一个URL。 - 可能是什么问题？

＆＃13;

	    // 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/']
	    ];

＆＃13;

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

＆＃13;

Answer 1

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

然而，有一种更简洁的方法来代替功能的复杂技术 - 返回功能。只需将整个循环体移动到您从循环中调用的一个函数中。然后，您不需要鼠标悬停上的额外复杂功能（或单击任何一个）。

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

最后，提供一些用户体验建议：我不建议在鼠标悬停时打开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;
      }
    }

带url的多个标记

1 个答案: