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

Question

我创建了一个圆圈相互重叠的谷歌地图,当我盘旋重叠的圆圈时,该圆圈的z-index应该会改变,它应该在其他圆圈之上.有一种方法可以为标记执行此操作,例如在此链接中" 在悬停时更改标记的z索引以使其可见 ".但我想为数据层创建的点做这个,这是我的小提琴样本

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

然后添加一个mouseover-listener,在其中增加zIndex并将其应用于该功能:

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

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