如何在KmlLayer上控制Google Maps信息窗口的内容？
雪98k
我在Google地图上有一个KML图层，其中包含许多多边形。单击每个多边形时，将使用默认的Google Maps信息窗口显示属性表中的数据。这是代码：
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
是否可以仅显示某些属性数据，而不能显示信息窗口中的每一列？当前正在显示多边形后面的所有数据。这也是信息窗口的图像，因此，例如，我只想在信息窗口中显示“名称”，“自治区”和“ KM2”数据：
地理编码
One option would be to use the suppressInfoWindows:true kmlOption, then create your own infowindow with whatever content you want in it.
The KmlLayer click event contains the KmlFeatureData from the KML, which you can parse to customize the information displayed.
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
该功能是
<id>从图层标记中提取的。如果未指定，则将为此功能生成一个唯一的ID。
- infoWindowHtml类型：字符串
要素的气球样式文本（如果已设置）。
- 名称类型：字符串
该功能是
<name>从图层标记中提取的。
- 片段类型：字符串
该功能是
<Snippet>从图层标记中提取的。
代码段：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Google Maps v3适合多个信息窗口的内容
- 2
Google Maps API信息窗口
- 3
异步Google Maps信息窗口
- 4
如何在iOS右侧显示Google Maps信息窗口
- 5
在Google Maps的“信息”窗口内单击按钮
- 6
Angular Google Maps信息窗口HTML
- 7
在Google Maps的信息窗口中添加图像？
- 8
Google Maps中的信息窗口无法加载
- 9
信息窗口的Google Maps外部链接
- 10
多个Google Maps折线和信息窗口
- 11
Google Maps信息窗口显示/隐藏操作
- 12
angularjs-google-maps 信息窗口位置
- 13
通过附加到Google Maps标记的信息框中的按钮，在Magnific弹出窗口中显示动态内容
- 14
Google Maps上的多个标记和信息窗口（使用MySQL）
- 15
如何在单独的 div 中显示信息窗口内容
- 16
使用ng-maps在标记点击上打开信息窗口
- 17
鼠标悬停时未显示Google Maps信息窗口
- 18
标记信息窗口中的Android Google Maps HTML
- 19
React.js-Google Maps-样式信息窗口
- 20
iOS自定义信息窗口Google Maps SDK 1.7.2
- 21
通过ClusterManager Google Maps Android显示的隐藏信息窗口
- 22
Google Maps Android的自定义信息窗口
- 23
Google Maps：缩放时，选择信息窗口文本
- 24
显示信息窗口后阻止Google Maps移动
- 25
Google Maps信息窗口不适用于标记单击
- 26
Google Maps Api-信息窗口中的多个项目
- 27
从数据库填充Google Maps信息窗口
- 28
自定义Google Maps JavaScript API 3信息窗口
- 29
在Google Maps信息窗口中将2 DIV彼此对齐
我来说两句