Question

我创建了一个谷圈地图，其中的圆圈相互重叠，当我盘旋重叠的圆圈时，该圆圈的z-index应该会发生变化，它应该位于其他圆圈之上。有一种方法可以为标记执行此操作，例如在此链接中 changing z index of marker on hover to make it visible“。但我想为数据层创建的点做这个，这是我的小提琴样本

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

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

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

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

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

1 个答案: