Question

我在google地图上加载了几个kml图层。我已经将一个点击事件附加到kml图层以显示它的信息，我还向infowindow添加了一些其他内容。我的问题是，如果我第二次单击该图层，则会重复添加的内容。这是我的代码：

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/

Answer 1

不要覆盖KmlLayer kmlEvent.featureData.infoWindow数据，禁止本机infowindows并使用该数据创建自己的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

代码段

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>

如何正确清除KML图层信息？

1 个答案: