如何在 KmlLayer 上控制 Google 地图信息 window 的内容?

How to control the content of a Google Maps info window on a KmlLayer?

我在 google 地图上有一个 KML 图层,其中包含许多多边形。单击每个多边形时,将使用默认 google 地图信息 window 显示来自属性 table 的数据。这是代码:

google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

是否可以只显示部分属性数据而不显示信息中的每一列window?它当前显示多边形后面的所有数据。这也是信息 window 的图像,例如,我只想在信息 window 中显示 'Name' 'Borough' 和 'KM2' 数据:

一种选择是使用 suppressInfoWindows:true kmlOption,然后使用您想要的任何内容创建您自己的信息窗口。

来自 KML 的 KmlLayer click event contains the KmlFeatureData,您可以对其进行解析以自定义显示的信息。

KmlFeatureData object specification

Data for a single KML feature in JSON format, returned when a KML feature is clicked. The data contained in this object mirrors that associated with the feature in the KML or GeoRSS markup in which it is declared.

Properties

  • author Type: KmlAuthor

The feature's <atom:author>, extracted from the layer markup (if specified).

  • description Type: string

The feature's <description>, extracted from the layer markup.

  • id Type: string

The feature's <id>, extracted from the layer markup. If no has been specified, a unique ID will be generated for this feature.

  • infoWindowHtml Type: string

The feature's balloon styled text, if set.

  • name Type: string

The feature's <name>, extracted from the layer markup.

  • snippet Type: string

The feature's <Snippet>, extracted from the layer markup.

代码片段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var kmllayer = new google.maps.KmlLayer({
    map: map,
    url: "http://www.geocodezip.com/geoxml3_test/us_states.xml",
    suppressInfoWindows: true
  });
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(kmllayer, 'click', function(evt) {
    infowindow.setContent(evt.featureData.name);
    infowindow.setPosition(evt.latLng);
    infowindow.open(map);
  })

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>