多个 kml 图层重叠信息窗口

Question

我的谷歌地图中有 5 个 kml 图层，但是当从 A 层显示信息窗口并从 B 层单击标记时，B 的标记将重叠，或者有时“隐藏”在 A 层的信息窗口后面取决于 z-index。如果您单击同一图层中的另一个标记，则另一个信息窗口将关闭。我希望一次只打开一个信息窗口或最后一次单击的具有最高 z-index 的信息窗口（意思是在顶部）。

我已阅读 this 和 this 和 this。第一个链接告诉我以另一个顺序加载 kml 层（对我来说不是一个选项），第二个链接我不明白，第三个链接是首选行为。我认为第三个链接实际上是第二个链接的实现。

我尝试了第三个链接中给出的修复，我将它与我自己的代码结合起来：

    var map;
    var layers = [];
var infowindow = new google.maps.InfoWindow({});
// create a new info window for the KML (outage) layer and the geo-coded house marker
function addKmlClickHandler(layers) {
    google.maps.event.addListener(layers, "click", function(event) {
        infowindow.close();
        infowindow.setOptions({
            pixelOffset:    event.pixelOffset,
            content:        event.featureData.infoWindowHtml,
            position:       event.latLng
        });
        infowindow.open(map);
    });
}


      var lat = position.coords.latitude;
      var long = position.coords.longitude;
      var myLatLng = new google.maps.LatLng(lat,long);
        var myOptions = {
            zoom: 15,
    keyboardShortcuts : false, 
    mapTypeControl : false, 
    mapMaker : false, 
    overviewMapControl : false, 
    panControl : false, 
    rotateControl : false, 
    scaleControl : false, 
    scrollwheel : false, 
    streetViewControl : false,
    zoomControl : false, 
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    //  alert('Your latitude is '+lat+' and longitude is '+long);



        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        layers [0] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
      google.maps.event.addListener(layers, 'click', function(kmlEvent) {
        alert('test');
    });
      layers [1] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [2] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [3] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [4] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
        /*var kmlUrl = '';
    var kmlOptions = {
      suppressInfoWindows: true,
      preserveViewport: true,
      map: map
    };

    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); */
    //alert('kml data geladen?');
          var infowindow = new google.maps.InfoWindow({
          content: 'You are here!',
      });
        var image = '...';
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
          title: 'You are here!',
      });
      infowindow.open(map,marker);

    }
 addKmlClickHandler(layers); // this should do the trick
for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }
  }

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }

}

但这不起作用。我究竟做错了什么？是否可以更容易地做到这一点，例如在kml layer marker 上查找点击事件，如果是，隐藏所有其他信息窗口？

    google.maps.event.addListener(layers[0], 'click', function(hideotherinfowindows) {
    ...
});

不幸的是，如果实际上可以隐藏除单击的信息窗口之外的所有信息窗口，我还没有找到任何地方。

Answer 1

1. 抑制 KmlLayers 上的自动信息窗口。
2. 添加您自己的点击侦听器以打开点击信息窗口
3. 只创建一个信息窗口，在标记之间移动它（使用相同的信息窗口作为“你在这里”标记）。

example

var infoWindow = new google.maps.InfoWindow();

function openIW(KMLevent) {
  infoWindow.close();
  infoWindow.setOptions(
    { 
     content: KMLevent.featureData.infoWindowHtml,
     position: KMLevent.latLng,
     pixelOffset: KMLevent.pixelOffset
    });
  infoWindow.open(map);
}

google.maps.event.addListener(layers[0], "click", openIW);
google.maps.event.addListener(layers[1], "click", openIW);
google.maps.event.addListener(layers[2], "click", openIW);
google.maps.event.addListener(layers[3], "click", openIW);
google.maps.event.addListener(layers[4], "click", openIW);
google.maps.event.addListener(map, "click", function() { infoWindow.close();});

working fiddle