Question

我有一个代码可以加载6个kml文件并需要添加事件监听器信息窗口，但它不会返回任何数据..

kml文件是路线的折线，我在图层[0] - ＆gt;中定义kml文件图层。层[5]。

任何人都可以帮我修改我的代码，所以infoWindow返回kml文件的描述..？

代码段

＆＃13;

X x;

＆＃13;

Answer 1

KmlLayer Click事件的参数是KmlMouseEvent，因此showInContentWindow的定义不正确：

function showInContentWindow(text) {
  var content = "<div>" + text +  "</div>";
  var infowindow = new google.maps.InfoWindow({
    content: content, 
    pixelOffset: new google.maps.Size(300, 0),
     })
  infowindow.open(map);
}

应该是这样的：

function showInContentWindow(kmlEvent) {
  var content = "<div>" + kmlEvent.featureData.description + "</div>";
  infowindow.setPosition(kmlEvent.latLng);
  infowindow.setOptions({
    pixelOffset:kmlEvent.pixelOffset,
    content: content
  });
  infowindow.open(map);
}

proof of concept fiddle

代码段

var map = null;
var layers = [];
var infowindow;

function initMap() {

  var lat = -6.9944910254;
  var long = 110.4205135536;
  var myLatLng = new google.maps.LatLng(lat, long);
  var myOptions = {
      zoom: 13,
      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);
  infowindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(300, 0),
  });

  function showInContentWindow(kmlEvent) {
    var content = "<div>" + kmlEvent.featureData.description + "</div>";
    infowindow.setPosition(kmlEvent.latLng);
    infowindow.setOptions({
      pixelOffset: kmlEvent.pixelOffset,
      content: content
    });
    infowindow.open(map);
  }


  //  alert('map geladen?');
  layers[0] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Jalur_Kondusif_edited2.kml',
    preserveViewport: true,
    suppressInfoWindows: false,
    map: map
  });
  layers[1] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Jalur_Rata_edited.kml',
    preserveViewport: true,
    suppressInfoWindows: true,
    map: map
  });
  layers[2] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Tanjakan_Ringan_edited.kml',
    preserveViewport: true,
    suppressInfoWindows: true,
    map: map
  });
  layers[3] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Tanjakan_Tajam_edited.kml',
    preserveViewport: true,
    suppressInfoWindows: true,
    map: map
  });
  layers[4] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Turunan_Ringan_edited.kml',
    preserveViewport: true,
    suppressInfoWindows: true,
    map: map
  });
  layers[5] = new google.maps.KmlLayer({
    url: 'http://smamakudus.com/dian/Turunan_Tajam_edited.kml',
    preserveViewport: true,
    suppressInfoWindows: true,
    map: map
  });


  google.maps.event.addListener(layers[0], "click", showInContentWindow);
  google.maps.event.addListener(layers[1], "click", showInContentWindow);
  google.maps.event.addListener(layers[2], "click", showInContentWindow);
  google.maps.event.addListener(layers[3], "click", showInContentWindow);
  google.maps.event.addListener(layers[4], "click", showInContentWindow);
  google.maps.event.addListener(layers[5], "click", showInContentWindow);


  for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(map);
  }
}

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -52px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

如何在KML谷歌地图中显示infoWindow？

1 个答案: