Question

我的Google地图存在问题。我试图得到它，以便每个标记链接到我的网站上的相关页面。但是，目前所有标记都链接到同一个地方，我不知道为什么。我在for循环中设置了一个事件监听器，它指定单击标记的时间，用户将被重定位到正确的特定网页。问题似乎是所有标记都在第一个标记位置并且链接到同一个位置。任何帮助都会受到大力赞赏。

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的值指向表中的最后一个条目。

您有两种选择：

使用点击的标记的属性（<LinearLayout android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp" android:orientation="horizontal"> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp" android:orientation="vertical">）
在事件监听器中使用函数闭包（用于this.getTitle()和marker）。

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

proof of concept fiddle

功能闭包解决方案（＃2）：

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

proof of concept fiddle

Google地图多个标记链接到同一个网址

1 个答案: