如何正确清除 KML 图层信息窗口？答案

【问题标题】：How to clear KML layer infowindow properly?如何正确清除 KML 图层信息窗口？
【发布时间】：2016-02-10 09:55:13
【问题描述】：

我的谷歌地图上加载了几个 kml 图层。我已将一个单击事件附加到 kml 图层以显示它的信息，并且我还在信息窗口中添加了一些其他内容。我的问题是如果我第二次单击图层，添加的内容会重复。这是我的代码：

google.maps.event.addListener(layers[2], 'click', function(kmlEvent) {
 latlongkml = kmlEvent.latLng.toString();
 var text = kmlEvent.featureData.name;
 station = text;
 kmlEvent.featureData.infoWindowHtml += '<p>'+latlongkml+'</p><br/><button onclick="kmladd()" class="btn btn-success btn-xs">Add to Route</button>';
showInContentWindow(text);

 });

function showInContentWindow(text) {
var div = document.getElementById('content-window');
 }

如果我点击两次它看起来像这样：

我试过这样清除内容：

google.maps.event.addListener(layers[2], 'click', function(kmlEvent) {
 latlongkml = kmlEvent.latLng.toString();
 var text = kmlEvent.featureData.name;
 station = text;
 kmlEvent.featureData.infoWindowHtml = ('');
 kmlEvent.featureData.infoWindowHtml += '<p>'+latlongkml+'</p><br/><button onclick="kmladd()" class="btn btn-success btn-xs">Add to Route</button>';
showInContentWindow(text);

 });

然后我的标题消失了：

这是该问题的 JSFiddle。 https://jsfiddle.net/rdawkins/82ks7xvp/7/

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

不要覆盖 KmlLayer kmlEvent.featureData.infoWindow 数据，禁止本地信息窗口并使用该数据创建您自己的信息窗口：

var infowindow = new google.maps.InfoWindow();
var kmlOptions = { map: map, suppressInfoWindows: true};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
  latlongkml = kmlEvent.latLng.toString();
  var text = kmlEvent.featureData.name;
  station = text;
  var htmlContent = kmlEvent.featureData.infoWindowHtml + '<p>'+latlongkml+'</p><br/><button onclick="kmladd()" class="btn btn-success btn-xs">Add to Route</button>';
  infowindow.setOptions({content: htmlContent,
    pixelOffset: kmlEvent.pixelOffset,
    position: kmlEvent.latLng})
    infowindow.open(map);
}):

proof of concept fiddle

代码 sn-p：

function display_kmlmap() {
  var infowindow = new google.maps.InfoWindow();
  var map_options = {};
  var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
  var kmlUrl = 'http://earth-api-samples.googlecode.com/svn/trunk/examples/static/red.kml';
  var kmlOptions = {
    map: map,
    suppressInfoWindows: true
  };

  var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

  google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
    latlongkml = kmlEvent.latLng.toString();
    var text = kmlEvent.featureData.name;
    station = text;
    var htmlContent = kmlEvent.featureData.infoWindowHtml + '<p>' + latlongkml + '</p><br/><button onclick="kmladd()" class="btn btn-success btn-xs">Add to Route</button>';
    infowindow.setOptions({
      content: htmlContent,
      pixelOffset: kmlEvent.pixelOffset,
      position: kmlEvent.latLng
    })
    infowindow.open(map);
  })

}

<script src="https://maps.google.com/maps/api/js"></script>
<title>Google Maps API v3 : KML Layer</title>

<body onload="display_kmlmap()">
  <div id="map_canvas" style="width:500px; height:400px; float:left">
  </div>
</body>

【讨论】：