Interactive change of KML Polygons Style in Google maps

问题

I have a database with KML Plolygons representing german postal regions.

I initialize the map like this to get the polygons displayed.

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
});

Everything works like a charm. I can even style the Polygons by defining styles in the kml file.

My question is; how can I change the style of polygon objects interactively on the map now. I want a mouse hover effect for example or set polygons as marked on mouseclick.

As far as I discovered I can add a click event.

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

The event object contains a list called featureData with the infoWindowHtml and also a ID of the object. Something like id:"g37a571f194fd2a75"

How can I access the polygon to change style dynamically without reload?

回答1:

You can't change the data displayed by KmlLayer (at least at the present time). If you want to change the styling of KML after it is displayed, some options are:

import it into FusionTablesLayer (allows dynamic styling, but doesn't seem compatible with your current strategy)
use a third party KML parser like geoxml3 or geoxml-v3 which display the KML as native Google Maps Javascript API v3 objects, which can be styled

example using geoxml3 which changes polygon styles on mouseover

回答2:

I found a good solution outside the google world.

I am using the open source Lefleat Javascript library Lefleat is really fast and easy to use and it renders geodata as SVG layer on OpenStreetMap oder Google maps. http://leafletjs.com/

I decided to use GeoJSON because it is shorter and faster.

The final tool. http://www.unternehmen-selbstaendigkeit.de/148-der-online-gebietsmanager.html (german)

来源：https://stackoverflow.com/questions/36446124/interactive-change-of-kml-polygons-style-in-google-maps

标签

javascript

google-maps

polygon

kml