谷歌地图v3 API鼠标悬停与GeoJson多边形层

google maps v3 API mouseover with GeoJson polygon layer

本文关键字:GeoJson 多边形 悬停 v3 API 鼠标 谷歌地图      更新时间:2023-09-26

如何获得鼠标悬停事件与谷歌地图Api V3对多边形形状的工作?

鼠标悬停时无法触发事件。

  var data_layer25 = new google.maps.Data({ map: map });
                                data_layer25.loadGeoJson('http://example.com/Assets/GeoJson/USA-MO.GeoJson');
                                data_layer25.setStyle({
                                            fillColor: '    #808000  ',
                                            strokeWeight: 1
                                    });
                                google.maps.event.addListener((data_layer25), "click", function () { window.location = "/RepTerritory/index/9" });
                    google.maps.event.addListener((data_layer25), "mouseover", function () {
                          this.setOptions({ fillColor: "#00FF00" });
                     });
                    google.maps.event.addListener((data_layer25), "mouseout", function () {
                          this.setOptions({ fillColor: "#FF0000" });
            });
            data_layer25.setMap(map);

试着用这个来改变鼠标事件的Data Layer的样式:

data_layer25.addListener('mouseover', function(e) {
     data_layer25.setStyle({
         fillColor: "#00FF00"
     });
});
data_layer25.addListener('mouseout', function(e) {
     data_layer25.setStyle({
         fillColor: "#FF0000"
     });
});