如何在 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 的样式。
选项:
使用 FusionTablesLayer(将您的 KML 导入 FusionTable,您可以从 FusionTable 动态设置折线样式)。
使用第 3 方 KML 解析器,例如 geoxml3 or geoxml-v3 将 KML 呈现为原生 Google 地图 JavaScript API v3 折线,然后修改那些。请注意,第 3 方解析器受 KML 的相同域安全策略约束,因此只能通过代理从其他域访问 KML。
example using geoxml3 (polylines change to yellow on mouseover)
我正在使用类似于下面的代码来显示建筑物 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 的样式。
选项:
使用 FusionTablesLayer(将您的 KML 导入 FusionTable,您可以从 FusionTable 动态设置折线样式)。
使用第 3 方 KML 解析器,例如 geoxml3 or geoxml-v3 将 KML 呈现为原生 Google 地图 JavaScript API v3 折线,然后修改那些。请注意,第 3 方解析器受 KML 的相同域安全策略约束,因此只能通过代理从其他域访问 KML。
example using geoxml3 (polylines change to yellow on mouseover)