javascript - 将 infoWindows 添加到数组中的多个标记

Question

我有一张 map ，我一直试图找出将信息窗口添加到数组中的标记，但我被卡住了。使用单个 map 和单个标记，我可以毫无问题地添加信息窗口。但在我的一生中，我无法让信息窗口在我的数组中工作。如果有人能帮助我让它发挥作用，我将永远感激不已。我的目的是能够在信息窗口中提取 html。这是我目前所处的位置。

var map;
var markers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 14,
    center: new google.maps.LatLng(-33.91721, 151.22630),
    mapTypeId: 'roadmap',
    disableDefaultUI: true
  });

  // var iconBase = <?php echo "'/images/markers/'"; ?>;
  var icons = {
    typea: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    },
    typeb: {
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    },
    typec: {
      icon: "http://maps.google.com/mapfiles/ms/micons/orange.png"
    }
  };

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map,
      type: feature.type
    });
    marker.addListener('click', function() {
      //set zoom level
      map.setZoom(20);
      //center map
      map.setCenter(marker.getPosition());
      alert("Testing");
    });
    markers.push(marker);
  }

  filterMarkers = function(getType) {
    console.log(getType);
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].type == getType || getType == "") {
        markers[i].setVisible(true);
      } else {
        markers[i].setVisible(false);
      }
    }
  }

  var features = [{
    position: new google.maps.LatLng(-33.91721, 151.22630),
    type: 'typea'
  }, {
    position: new google.maps.LatLng(-33.91539, 151.22820),
    type: 'typeb'
  }, {
    position: new google.maps.LatLng(-33.91747, 151.22912),
    type: 'typec'
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

完整的工作 fiddle :http://jsfiddle.net/h80vtmye/

Answer 1

GoogleMap不允许像这样使用infowindow。创建 infowindow 的单个副本，而不是维护数组，并在标记的 mouseover 事件期间使用 infowindow.setContent() 设置内容。