如何在 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>
我在 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>