更改 google 地图数据图层点的 z-index

Question

我创建了一个 google 地图，其中的圆圈相互重叠，当我悬停在重叠的圆圈上时，该圆圈的 z-index 应该会发生变化并且它应该位于其他圆圈之上。有一种方法可以对标记执行此操作，例如 link “ 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 的变量，并将此 zIndex 应用到 setStyle。

    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/

更改 google 地图数据图层点的 z-index

Changing z-index for google map data layer point

html

javascript

css

jquery

google-maps