显示/隐藏标记并使用信息窗口谷歌地图 API v3

Question

我正在构建自己的自定义谷歌地图，我希望地图上有 2 个功能；显示/隐藏标记和显示信息窗口（点击标记时）

但是，我一次只能做一个。如果我想显示/隐藏标记，我必须推送数组，但是它不能显示单个标记的信息窗口，所以我现在处于 catch-22 的情况......希望你们中的一个伙计们可以把我推向正确的方向:)

这是我到目前为止的代码（显示/隐藏标记）：

var map;
var otherMarker = [];
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}];

function initialize() {

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 7,
        center: new google.maps.LatLng(52.2129919 , 5.2793703),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map_canvas = document.getElementById("map_canvas");

    map = new google.maps.Map(map_canvas, myOptions);
    var infowindow = new google.maps.InfoWindow();

       for (var i = 0; i < other.length; i++) { 

          otherMarker.push(new google.maps.Marker({
            position: new google.maps.LatLng(other[i].lat, other[i].lng),
            map: map,
            icon: other[i].icon


          }));

          google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) {
          return function() {
          infowindow.setContent('<div id="content">'+
          '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+
              '<div id="bodyContent">'+
              '<p>'+other[i].content+'</p>'+
              '</div>'+
          '</div>');
              infowindow.open(map, otherMarker);

            }
          })(otherMarker, i));
       }
}

   function hideOther(){
        for(var i=0; i<otherMarker.length; i++){
            otherMarker[i].setVisible(false);
        }
    }

window.onload = initialize;     

为了显示信息窗口，我不推送数组并用以下代码替换 for 循环：

       for (var i = 0; i < other.length; i++) { 

          otherMarker= new google.maps.Marker({
            position: new google.maps.LatLng(other[i].lat, other[i].lng),
            map: map,
            icon: other[i].icon


          });

Answer 1

otherMarker 只是一个数组，而不是 google.maps 元素。因此，它本身没有听众。

其次，作为任何 js 元素，您可以将自己的一些属性添加到 google.maps.Marker 中，以便稍后在打开 infoWindow 时阅读它们。

要让每个标记在单击时显示一个 infoWindow，您应该这样做

for (var i = 0; i < other.length; i++) { 
   var newMarker=new google.maps.Marker({
       position: new google.maps.LatLng(other[i].lat, other[i].lng),
       map: map,
       icon: other[i].icon,
       name: other[i].name,
       content: other[i].content
   });

   google.maps.event.addListener(newMarker, 'click', function() {
      infowindow.setContent('<div id="content">'+
      '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">'+newMarker.name+'</h1>'+
          '<div id="bodyContent">'+
          '<p>'+newMarker.content+'</p>'+
          '</div>'+
      '</div>');
      infowindow.open(map, newMarker);
   });

   otherMarker.push(newMarker);
}

换句话说：

• 声明标记
• 声明它的监听器
• 将其推送到数组中

请注意，我为点击事件简化了匿名函数。它应该可以工作，但如果信息窗口变为空，也许您可​​以使用 getter 获取名称和内容，而不是直接访问属性。

Answer 2

感谢阿梅纳迪尔！虽然信息窗口不会在正确的位置弹出，但在您的帮助下，我稍微调整了代码，它现在可以工作了！:) 这是工作代码；

var otherMarker = [];
var newMarker = [];
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}];

function initialize() {

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 7,
        center: new google.maps.LatLng(52.2129919 , 5.2793703),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map_canvas = document.getElementById("map_canvas");

    map = new google.maps.Map(map_canvas, myOptions);
    var infowindow = new google.maps.InfoWindow();

   for (var i = 0; i < other.length; i++) { 

      otherMarker = new google.maps.Marker({
        position: new google.maps.LatLng(other[i].lat, other[i].lng),
        map: map,
        icon: other[i].icon


      });
      google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) {
      return function() {
      infowindow.setContent('<div id="content">'+
      '<div id="siteNotice" style="width:300px;">'+
          '</div>'+
          '<h1  id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+
          '<div id="bodyContent">'+
          '<p style="width:300px;margin-top:5px;">'+other[i].content+'</p>'+
          '</div>'+
      '</div>');
          infowindow.open(map, otherMarker);


        }
      })(otherMarker, i));
      newMarker.push(otherMarker);
   }
 }

function hideOther(){
    for(var i=0; i<newMarker.length; i++){
        newMarker[i].setVisible(false);
    }
}
function showOther(){
    for(var i=0; i<newMarker.length; i++){
        newMarker[i].setVisible(true);
    }
}

window.onload = initialize;