Question

我的视图中有Google地图，我添加了很多多边形。问题是我有不同大小的多边形，重叠。我需要为每个多边形设置z-index，以便我可以正确使用点击监听器。

这个过程应该是直截了当的，但正如我注意到的那样，它不是。尝试调用getZIndex（）方法或setZindex（）时，我遇到此错误。

Undefined is not a function (evaluating 'shape.setZIndex()')

这是我的代码：

function attachMap(params){
    removeMap();
    var options = $.extend(true, {
        shapesData: [],
        shapeClick: function(event){}
    },params);

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    // Create the Google Maps shapes and append them to the map
    shapes = [];
    map = new google.maps.Map(document.getElementById('dxf-shapes'), mapOptions);
    if(typeof options.shapesData != "undefined") {
        $.each(options.shapesData, function (shapeIndex, shapeData) {
            var paths = [];
            // points of the shape
            $.each(shapeData.points, function (pointIndex, pointData) {
                var mapsPoint = new google.maps.LatLng(pointData.lat, pointData.lng);
                paths.push(mapsPoint);
            });

            // new shape from the points
            var shape = new google.maps.Polygon({
                paths: paths,
                strokeColor: 'rgb(' + shapeData.color + ')',
                strokeOpacity: 1,
                strokeWeight: 1.5,
                fillColor: 'rgb(' + shapeData.color + ')',
                fillOpacity: 0,
                geodesic: true,
                zIndex: 1
            });

            shapes.push(shape);
        });

        shapes.sort(function(a, b){
            var aArea = google.maps.geometry.spherical.computeArea(a.getPath());
            var bArea = google.maps.geometry.spherical.computeArea(b.getPath());

            if( aArea < bArea ){
                return -1;
            }
            if(aArea > bArea){
                return 1;
            }

            return 0;
        });

        var zIndex = 0;
        $.each(shapes, function(index, shape){
            zIndex++;
            //append the shape to the map
            shape.setMap(map);
            shape.setZIndex(zIndex);

            google.maps.event.addListener(shape, 'click', options.shapeClick);
        });
    }
}

Answer 1

我建议不要扩展Maps API对象原型并依赖于未记录的行为（get的{{1}}和set），如答案中所示。

如果您只能使用记录的API，那就更好了。在您的代码中，您根本没有使用zIndex，因此请将其删除。如果您致电getZIndex，只需将其更改为：

shape.setZIndex(zIndex);

现在，您只使用已记录的Maps API属性和方法。这使您的代码更具有前瞻性。

Answer 2

通过将方法setZIndex（）和getZIndex（）添加到多边形类型来解决问题。

google.maps.Polygon.prototype.getZIndex=function(){return (this.get('zIndex')||0);};
google.maps.Polygon.prototype.setZIndex=function(v){this.set('zIndex',v);};

希望这将有助于将来。

调用Google Maps多边形的getZIndez（）时，Undefined不是函数

2 个答案: