javascript - 为 Google map 多边形调用 getZIndez() 时，未定义不是函数

Question

我的 View 中有一个 Google map ，我正在向其中添加很多多边形。问题是我有不同大小的多边形重叠。我需要为每个多边形设置 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 对象原型(prototype)并依赖未记录的行为(zIndex 的 get 和 set)，如中所示你的答案。

最好只使用文档化的 API。在你的代码中，你根本没有使用 getZIndex，所以去掉它。在调用 shape.setZIndex(zIndex); 的地方，只需将其更改为:

shape.setOptions({ zIndex: zIndex });

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