Question

我有一张地图，我一直试图找出将infoWindow添加到数组中的标记，我被卡住了。使用单个地图和单个标记我可以添加信息窗口没问题。但是对于我的生活，我不能让我的阵列中的信息工作。如果有人可以帮助我让这个工作，我将永远是伟大的。我的意图是能够在infowindows中提取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);

完成工作小提琴：http://jsfiddle.net/h80vtmye/

Answer 1

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

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

1 个答案: