谷歌地图 API 信息窗口

Question

我有一个带有多个标记的 Google 地图。我正在尝试在我的 InfoWindow 中显示每个标记的信息：

function initializeMaps() {
      var latlng = new google.maps.LatLng(59.4920, 37.3010);
      var myOptions = {
          zoom: 6,
          center: latlng,
          disableDefaultUI: false,
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
      var infoWindow = new google.maps.InfoWindow();
      var latlngbounds = new google.maps.LatLngBounds();
      var map = new google.maps.Map(document.getElementById('map'),myOptions);

      var mc = new MarkerClusterer(map);
      var marker, i;
        for (i = 0; i < data.markers.length; i++) { 
              var image = "/images/markers/green-marker.png";
              marker = new google.maps.Marker({
              position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
              map: map,
              title: data.markers[i].name,
              icon: image,
            });
            /*jshint loopfunc: true */
            (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {

                for (i=0; i<data.markers.length; i++) {
                    infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
                    infoWindow.open(map, marker);
                }

            });
        })(marker, data);
        latlngbounds.extend(marker.position);

            mc.addMarker(marker);
        }
        var bounds = new google.maps.LatLngBounds();
    }

但它只在地图上的每个标记 infoWindow 上显示我的数组的最后一个元素信息。在我的 JSON 文件下方：

var data = {
"markers":[
    {
        "city": "City Sample Text",
        "name": "Name Sample Text",
        "shortname": "redsquare_location",
        "description": "Descr Sample Text",
        "lat": "51.4910",
        "lng": "31.2985",
        "link": "images/infowindows/rs_rp.png",
    },
    {
        "city": "City Sample Text",
        "name": "Name Sample Text",
        "shortname": "pchurch_location",
        "description": "Descr Sample Text",
        "lat": "51.4925",
        "lng": "31.3007",
        "link": "images/infowindows/pc_rp.png",
    },
    {
        "city": "City Sample Text",
        "name": "Name Sample Text",
        "shortname": "muschool_location",
        "description": "Decr Sample Text",
        "lat": "51.4932",
        "lng": "31.3054",
        "link": "images/infowindows/ms_rp.png",
    }       
]
}

我的错误是什么？

Answer 1

因此只能看到最后一个元素的信息

var marker, i;
for (i = 0; i < data.markers.length; i++) { 
      var image = "/images/markers/green-marker.png";
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
          map: map,
          title: data.markers[i].name,
          icon: image,
      });

      google.maps.event.addListener(marker, "click", function (e) {
          ...
      });
}

您正在尝试在“for”循环内设置事件侦听器。因此，您的情况与Javascript multiple dynamic addEventListener created in for loop - passing parameters not working 非常相似。

如果您使用以下代码，此代码将起作用：

data.markers.forEach(function(marker){
    var image = "/images/markers/green-marker.png";
    var mapMarker = new google.maps.Marker({
          position: new google.maps.LatLng(marker.lat, marker.lng),
          map: map,
          title: marker.name,
          icon: image,
    });
    google.maps.event.addListener(marker, "click", function(e) {
      ...
    });
    mc.addMaker(mapMarker);
})

Answer 2

相关问题的重复：Google Maps JS API v3 - Simple Multiple Marker Example

您没有在点击侦听器中的 i 变量上获得函数闭包，并且通过点击侦听器内部的循环将始终将信息留在信息窗口中数据最后一个条目的位置：

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {

        for (i=0; i<data.markers.length; i++) {
            infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
            infoWindow.open(map, marker);
        }

    });
})(marker, data);

最简单的解决方案是获取填充信息窗口所需数据的函数闭包，因此您无需在每次标记点击时遍历整个输入数据集：

(function(marker, data) {
  google.maps.event.addListener(marker, "click", function(e) {

    infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>");
    infoWindow.open(map, marker);
  });
})(marker, data.markers[i]);

proof of concept fiddle

代码 sn-p：

function initializeMaps() {
  var latlng = new google.maps.LatLng(59.4920, 37.3010);
  var myOptions = {
    zoom: 6,
    center: latlng,
    disableDefaultUI: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var infoWindow = new google.maps.InfoWindow();
  var latlngbounds = new google.maps.LatLngBounds();
  var map = new google.maps.Map(document.getElementById('map'), myOptions);

  var mc = new MarkerClusterer(map);
  var marker, i;
  for (i = 0; i < data.markers.length; i++) {
    var image = "http://maps.google.com/mapfiles/ms/icons/green.png";
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
      map: map,
      title: data.markers[i].name,
      icon: image,
    });
    /*jshint loopfunc: true */
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {

        infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>");
        infoWindow.open(map, marker);
      });
    })(marker, data.markers[i]);
    latlngbounds.extend(marker.position);

    mc.addMarker(marker);
  }
  // var bounds = new google.maps.LatLngBounds();
  map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, "load", initializeMaps);

var data = {
  "markers": [{
    "city": "City Sample Text",
    "name": "Name Sample Text",
    "shortname": "redsquare_location",
    "description": "Descr Sample Text 0",
    "lat": "51.4910",
    "lng": "31.2985",
    "link": "images/infowindows/rs_rp.png",
  }, {
    "city": "City Sample Text",
    "name": "Name Sample Text",
    "shortname": "pchurch_location",
    "description": "Descr Sample Text 1",
    "lat": "51.4925",
    "lng": "31.3007",
    "link": "images/infowindows/pc_rp.png",
  }, {
    "city": "City Sample Text",
    "name": "Name Sample Text",
    "shortname": "muschool_location",
    "description": "Decr Sample Text 2",
    "lat": "51.4932",
    "lng": "31.3054",
    "link": "images/infowindows/ms_rp.png",
  }]
};

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>