如何修复谷歌地图z-index问题

时间:2015-07-02 20:12:45

标签: google-maps-api-3

我使用addGeoJson画了一个圆圈和一些多边形。问题是一些多边形被绘制在圆圈上方,一些多边形在下方。如何解决这个问题?我想在所有多边形上绘制圆圈。这是我的代码

var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var mapOptions = {
    zoom:9,
    center:latlng,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(mapcontainer, mapOptions);


var circleOptions = {
    fillOpacity:0,
    strokeColor: '#000000',
    strokeWeight:2,
    strokeOpacity:1,
    center:map1.getCenter(),
    radius:2000,
    map:map1
};

circleRadius = new google.maps.Circle();
circleRadius.setOptions(circleOptions);

var listOfPolygons = loadPolygons();

//drawing polygon layers
var layer = new google.maps.Data();
var url = 'url/to/cords';
$.ajax({
    url: url,
    type: 'POST',
    data: {'codes': listOfPolygons},
    success:function(data) {
        layer.addGeoJson(data);
        layer.setMap(map1);
        layer.setStyle({
            strokeColor: '#6da57a',
            strokeOpacity:.4,
            strokeWeight:1,
            fillColor: '#7bd490',
            fillOpacity:.6
        });
    }
});

查看截图 enter image description here

1 个答案:

答案 0 :(得分:1)

只需设置zIndex - 选项,并为圈子提供比数据要素更高的zIndex。

var circleOptions = {
    fillOpacity:0,
    strokeColor: '#000000',
    strokeWeight:2,
    strokeOpacity:1,
    center:map1.getCenter(),
    radius:2000,
    map:map1,
    zIndex:1//<----here
};

//........


layer.setStyle({
        strokeColor: '#6da57a',
        strokeOpacity:.4,
        strokeWeight:1,
        fillColor: '#7bd490',
        fillOpacity:.6,
        zIndex:0//<-----here
    });