Google地图中KML多边形样式的交互式更改

时间:2016-04-06 08:54:44

标签: javascript google-maps polygon kml

我有一个代表德国邮政区域的KML Plolygons数据库。

我像这样初始化地图以显示多边形。

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var plzLayer = new google.maps.KmlLayer({
    url: 'http://xxxxx.de/index.php?option=com_map&task=kml.getplz&search=542',
    map: map
});

一切都像魅力一样。我甚至可以通过在kml文件中定义样式来设置多边形的样式。

enter image description here

我的问题是;如何在地图上以交互方式更改多边形对象的样式。我想要一个鼠标悬停效果,或者设置鼠标点击标记的多边形。

据我所知,我可以添加点击事件。

plzLayer.addListener('click', function(kmlEvent) {
    console.log(this.objInfo);
});

事件对象包含一个名为featureData的列表,其中包含infoWindowHtml以及该对象的ID。 像 id:" g37a571f194fd2a75"

如何在不重新加载的情况下访问多边形以动态更改样式?

2 个答案:

答案 0 :(得分:1)

您无法更改KmlLayer显示的数据(至少目前为止)。如果要在显示KML后更改其样式,可以使用以下选项:

  1. 将其导入FusionTablesLayer(允许动态样式,但似乎与您当前的策略不兼容)
  2. 使用第三方KML解析器,例如geoxml3geoxml-v3,将KML显示为原生Google Maps Javascript API v3对象,可以设置样式
  3. example using geoxml3 which changes polygon styles on mouseover

答案 1 :(得分:0)

我在谷歌世界之外找到了一个很好的解决方案。

我正在使用开源 Lefleat Javascript库 Lefleat非常快速且易于使用,它在OpenStreetMap或Google地图上将地理数据渲染为SVG图层。 http://leafletjs.com/

我决定使用GeoJSON,因为它更短更快。

最后的工具。 http://www.unternehmen-selbstaendigkeit.de/148-der-online-gebietsmanager.html (德国)