Google 映射链接到相同 url 的多个标记

Question

我对 Google 地图有疑问。我正在尝试获取它，以便每个标记 link 到我网站上的相关页面。但是，目前所有标记 link 都在同一个地方，我不确定为什么。我在 for 循环中设置了一个事件侦听器，它指定何时单击标记，用户将被重新定位到正确的特定网页。问题似乎是所有标记都占据了第一个标记位置并且 linking 到同一个地方。任何帮助将不胜感激。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      styles: [{"featureType": "all", "elementType": "labels.text.fill", "stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},{"featureType": "all", "elementType": "labels.text.stroke", "stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "all", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]},{"featureType": "administrative", "elementType": "geometry.fill", "stylers": [{"color": "#fefefe"},{"lightness": 20}]},{"featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]},{"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},{"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},{"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#dedede"},{"lightness": 21}]},{"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"},{"lightness": 17}]},{"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},{"featureType": "road.arterial", "elementType": "geometry", "stylers": [{"color": "#ffffff"},{"lightness": 18}]},{"featureType": "road.local", "elementType": "geometry", "stylers": [{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#e9e9e9"},{"lightness": 17}]}]  });

    setMarkers(map);
    }

    // Data for the markers consisting of a name, a LatLng and a zIndex for the
    // order in which these markers should display on top of each other.
    var beaches = [ ['Test', Latitude, Longitude, 4], ['Test1', Latitude, Longitude, 4], ['Test2', Latitude, Longitude, 4], ['Test3', Latitude, Longitude, 4] ]
function setMarkers(map) {

    var image = {
      url: 'open.png',
      // The origin for this image is (0, 0).
      origin: new google.maps.Point(0, 0)
    };

    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i = 0; i < beaches.length; i++) {
      var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat: beach[1], lng: beach[2]},
        map: map,
        icon: image,
        title: beach[0],
        zIndex: beach[3]
      });

      bounds.extend(marker.position);


      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
             window.location.href = "http://localhost/" + beach[0];
          }
      })(marker, i));

    }

    map.fitBounds(bounds);

      var listener = google.maps.event.addListener(map, "idle", function () {
        map.setZoom(11);
        google.maps.event.removeListener(listener);
    });
    }

Answer 1

这是在循环中分配变量的常见问题。当循环退出时，beach 的值将指向 table 中的最后一个条目。

您有两个选择：

使用被点击的标记的属性 (this.getTitle())
在事件侦听器中使用函数闭包（用于 marker 和 i）。

最简单的解决方案（#1）：

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    window.location.href = "http://localhost/" + this.getTitle();
  }
})(marker, i));

proof of concept fiddle

函数关闭方案（#2）：

google.maps.event.addListener(marker, 'click', (function(marker, i, link) {
  return function() {
    window.location.href = "http://localhost/" + link;
  }
})(marker, i, beach[0]));

proof of concept fiddle

Google 映射链接到相同 url 的多个标记

Google Maps Multiple Markers linking to the same url

javascript

google-maps

for-loop

google-maps-api-3

google-maps-markers