在Google Maps标记对象上添加infoWindows

问题描述

我想在多个标记上添加信息窗口，这些标记放置在Google地图的群集中。这是下面的代码。当我点击一个标记时，看不到任何东西。请看看。

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"),{
    zoom: 10,center: { lat: 62.601,lng: 29.7636 },});
  var infowindow = new google.maps.InfoWindow();
  var markers = locations.map(function (location,i) {
    return new google.maps.Marker({
      position: location,title: "test",});
    google.maps.event.addListener(markers,"click",function () {
      infowindow.setContent("<h3>" + "testing" + "</h3>");
      infowindow.open(map,this);
    });
  });
  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map,markers,{
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",});
}

解决方法

在您的.map()中，您要先返回标记，然后再向其添加EventListener，因此它将永远不会被添加。

假设这是向标记添加EventListener的正确方法，请执行以下操作-临时保存它，并在添加了EventListener后返回它，如下所示：

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"),{
    zoom: 10,center: { lat: 62.601,lng: 29.7636 },});
  var markers = locations.map(function (location,i) {
    const marker = new google.maps.Marker({ // temp save
      position: location,title: "test",});

    google.maps.event.addListener(marker,"click",function () { // add eventlistener to marker
      var infowindow = new google.maps.InfoWindow(); // probably also move infoWindow initialization in here
      infowindow.setContent("<h3>" + "testing" + "</h3>");
      infowindow.open(map,this);
    });

    return marker; // return after
  });
  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map,markers,{
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",});
}