javascript - 更改谷歌地图数据层点的 z-index

Question

我创建了一个带有相互重叠的圆圈的谷歌地图，当我悬停在重叠的圆圈上时，该圆圈的 z-index 应该发生变化并且它应该位于其他圆圈之上。有一种方法可以为标记执行此操作，就像在这个链接中“ changing z index of marker on hover to make it visible “。但我想对数据层创建的点执行此操作，这是我的 fiddle 示例

http://jsfiddle.net/8cs97z8h/1/

        var json = {
            "type": "FeatureCollection",
            "features": [

                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.344139,28.629211]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.341263,28.629228]
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.3412, 28.629]
                    }
                },
            ]
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),      {
                zoom: 12,
                center: new google.maps.LatLng(28.666767, -98.367298),

        });
        map.data.addGeoJson(json);
        map.data.setStyle(styleFeature);

   function styleFeature(feature) {
            return {
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    strokeWeight: 2,
                    strokeColor: 'white',
                    fillColor: 'blue',
                    fillOpacity: 1.0,
                    scale: 7
                }
            };
        }

Answer 1

您可以使用 overrideStyle实现它。

在存储 zIndex 的位置设置一个变量，并在 setStyle 中应用此 zIndex。

    var zIndex=1;
    //Setting style for markers circles.
    function styleFeature(feature) {
       return {
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                strokeWeight: 2,
                strokeColor: 'white',
                fillColor: 'blue',
                fillOpacity: 1.0,
                scale: 7
            },
             zIndex:zIndex
        };
    }

然后在递增 zIndex 的地方添加一个鼠标悬停监听器并将其应用于该功能:

map.data.addListener('mouseover', function(event) {
       map.data.overrideStyle(event.feature, {zIndex: ++zIndex});
});

演示:http://jsfiddle.net/8cs97z8h/6/