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

Question

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

kml文件是路线的多段线，我在层[0] -->层[5]中定义kml文件层。

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

代码片段:

 <script>

var map = null;
var layers = [];

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);

 google.maps.event.addListener(layers, 'click', function(kmlEvent) {
    showInContentWindow(kmlEvent.featureData.description);
     });

 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);
}    


//  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);
  }
}


    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3p-U78HJWBN9dDE7YwD537UrLauSv90A&signed_in=false&callback=initMap">
    </script>

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>