如何在 KmlLayer 上控制 Google 地圖信息窗口的內容？

Question

我在包含許多多邊形的谷歌地圖上有一個 KML 圖層。 單擊每個多邊形時，將使用默認的谷歌地圖信息窗口顯示屬性表中的數據。 這是代碼：

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

是否可以只顯示部分屬性數據而不是信息窗口中的每一列？ 它當前顯示多邊形后面的所有數據。 這也是信息窗口的圖像，例如，我只想在信息窗口中顯示“名稱”、“自治市鎮”和“KM2”數據：

Answer 1

一種選擇是使用suppressInfoWindows:true kmlOption ，然后使用您想要的任何內容創建您自己的信息窗口。

KmlLayer 單擊事件包含來自 KML 的KmlFeatureData ，您可以對其進行解析以自定義顯示的信息。

KmlFeatureData 對象規范

JSON 格式的單個 KML 要素的數據，在單擊 KML 要素時返回。 此對象中包含的數據反映了與聲明它的 KML 或 GeoRSS 標記中的要素關聯的數據。

特性

• 作者類型：KmlAuthor

特征的<atom:author> ，從層標記中提取（如果指定）。

• 描述類型：字符串

特征的<description> ，從圖層標記中提取。

• id 類型：字符串

特征的<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>