如何在 Google Maps Api v3 中访问单击的多边形以更改其样式

How to access clicked polygon to change it's style in Google Maps Api v3

我正在使用类似于下面的代码来显示建筑物 KML 图层。单击事件有效,我得到名称和 HTML。我需要做的是,我想改变点击 polygon/line 的样式。假设我想更改边框宽度。我该怎么做?

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: 41.876,
            lng: -87.624
        }
    });

    var ctaLayer = new google.maps.KmlLayer({
        url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
        map: map
    });

    ctaLayer.addListener('click', function(kmlEvent) {
        //need to change style of the clicked element here.
    });
}

您无法使用 API 更改 KmlLayer 的样式。

选项:

  1. 使用 FusionTablesLayer(将您的 KML 导入 FusionTable,您可以从 FusionTable 动态设置折线样式)。

  2. 使用第 3 方 KML 解析器,例如 geoxml3 or geoxml-v3 将 KML 呈现为原生 Google 地图 JavaScript API v3 折线,然后修改那些。请注意,第 3 方解析器受 KML 的相同域安全策略约束,因此只能通过代理从其他域访问 KML。

example using geoxml3 (polylines change to yellow on mouseover)