javascript - 当多个信息窗口同时打开时隐藏谷歌地图信息窗口内容

Question

我想隐藏谷歌地图中多个信息窗口中的特定信息窗口内容。如果我打开单个信息窗口，它工作正常，但如果我一次打开多个信息窗口，内容会在另一个信息窗口中更改。

请找到下面的代码

 var map;
 var markers = [];

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

  function addMarker(feature) {
  var marker = new google.maps.Marker({
  position: feature.position,
  map: map,
  type: feature.type,
  id:feature.id,
  description: feature.description,
  infoWindow:new google.maps.InfoWindow({})
});

 marker.addListener('click', function() {

  var content="<h5>"+marker.type+"</h5>"+
             "<p id='des'>"+marker.description+"</p>"
             google.maps.event.addListener(this.infoWindow, 
         'domready', function () {
             if(marker.id===1){
             document.getElementById("des").style.display="none";
             }
          });
           this.infoWindow.setContent(content);
            this.infoWindow.open(map,marker);

       });
        markers.push(marker);
    }



  var features = [

{
  position: new google.maps.LatLng(13.018057, 77.666794),
  type: 'type1',
  id: 1,
  description: 'welcome to Hyd'
}, {
  position: new google.maps.LatLng(13.015136, 77.647265),
  type: 'type2',
  id:2,
  description: ' welcome to Blr'
}, {
  position: new google.maps.LatLng(13.009970, 77.660088),
  type: 'type3',
  id:3,
  description: ' welcome to Mum'
      }

    ];

     for (var i = 0; i < features.length; i++) {
         addMarker(features[i]);
        }
        }

     $(document).ready(function() {
         initMap();
     });

请在下面找到 jsfiddle

Answer 1

最简单的修复方法是在标记单击事件监听器函数中使用 this 来引用 marker(标记变量左指向循环中处理的最后一个标记) )，然后对于 domready 回调，您需要将其保存(作为 that，在回调函数的闭包中)

此外，您有多个信息窗口，其中具有相同的元素 id，元素 id 必须 是唯一的。一种选择是将标记 id 附加到元素 id(即标记/信息窗口 1 的 des1)。

marker.addListener('click', function() {
  // save this for use inside domready event listener callback function
  var that = this;
  var content = "<h5>" + this.type + "</h5>" +
    "<p id='des"+this.id+"'>" + this.description + "</p>"
  // if need to wait for infowindow to open
  google.maps.event.addListener(this.infoWindow, 'domready', function() {
    console.log("that.id="+that.id)
    if (that.id === 1) {
      if (!!document.getElementById("des"+that.id))
        document.getElementById("des"+that.id).style.display = "none";
    }
  });
  this.infoWindow.setContent(content);
  this.infoWindow.open(map, this);
  // if domready has already fired
  if (that.id === 1) {
  if (!!document.getElementById("des"+that.id))
    document.getElementById("des"+that.id).style.display = "none";
  }

});

updated fiddle

代码片段:

var map;
var markers = [];

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

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      map: map,
      type: feature.type,
      id: feature.id,
      title: "" + feature.id,
      description: feature.description,
      infoWindow: new google.maps.InfoWindow({})
    });
    marker.addListener('click', function() {
      // save this for use inside domready event listener callback function
      var that = this;
      var content = "<h5>" + this.type + "</h5>" +
        "<p id='des" + this.id + "'>" + this.description + "</p>"
      // if need to wait for infowindow to open
      google.maps.event.addListener(this.infoWindow, 'domready', function() {
        console.log("that.id=" + that.id)
        if (that.id === 1) {
          if (!!document.getElementById("des" + that.id))
            document.getElementById("des" + that.id).style.display = "none";
        }
      });
      this.infoWindow.setContent(content);
      this.infoWindow.open(map, this);
      // if domready has already fired
      if (that.id === 1) {
        if (!!document.getElementById("des" + that.id))
          document.getElementById("des" + that.id).style.display = "none";
      }

    });
    markers.push(marker);
  }



  var features = [

    {
      position: new google.maps.LatLng(13.018057, 77.666794),
      type: 'type1',
      id: 1,
      description: 'welcome to Hyd'
    }, {
      position: new google.maps.LatLng(13.015136, 77.647265),
      type: 'type2',
      id: 2,
      description: ' welcome to Blr'
    }, {
      position: new google.maps.LatLng(13.009970, 77.660088),
      type: 'type3',
      id: 3,
      description: ' welcome to Mum'
    }

  ];

  for (var i = 0; i < features.length; i++) {
    addMarker(features[i]);
  }
}

$(document).ready(function() {
  initMap();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>