在Google地图上添加和删除多边形形状更改的标记

时间:2017-03-25 06:04:05

标签: javascript google-maps

我第一次尝试Google地图绘图工具因此,如果您注意到任何错误的方法或其他,那么您可以指出它。

基本上,我正在处理添加和删除标记取决于用户在地图上绘制的形状,或者在编辑形状或重新调整形状之后。

我使用三种形状。 1.圆2.矩形3.多边形

圆形和矩形工作正常。只是Polygon无法正常工作。 绘图后和编辑后,Polygon不会正确显示或删除标记。

以下是正常工作的圆的代码。

google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
        var radius = circle.getRadius();
        drawingManager.setOptions({
            drawingControl: false
        });
        drawingManager.setMap(null);
        redondo = circle;
        google.maps.event.addListener(redondo, 'radius_changed', function () {

            for (i = 0; i < markers.length; i++) {
                if (!(circle.getBounds().contains(markers[i].getPosition())))
                {
                    markers[i].setMap(null);
                    $('#prop' + i).hide();
                } else {
                    markers[i].setMap(map);
                    $('#prop' + i).show();
                }
            }
        });
    });

现在对于Polygon:哪个不能正常工作。

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {

        drawingManager.setOptions({
            drawingControl: false
        });
        drawingManager.setMap(null);
        redondo = polygon;
        google.maps.event.addListener(redondo, 'bounds', function () {

            for (i = 0; i < markers.length; i++) {
                if((polygon.map.center.lat() < markers[i].getPosition().lat()) && (polygon.map.center.lng() < markers[i].getPosition().lng()))
                {
                 markers[i].setMap(map);
                $('#prop' + i).show();
            } else {
                markers[i].setMap(null);
                    $('#prop' + i).hide();
            }
            }
        });
    });

1 个答案:

答案 0 :(得分:0)

首先制作这个数组。

 circleOptions: {
            fillColor: '#2A5C8D',
            fillOpacity: 0.5,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        rectangleOptions: {
            fillColor: '#2A5C8D',
            fillOpacity: 0.5,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }

然后使用Google绘图工具Api

 google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {

        drawingManager.setOptions({
            drawingControl: false
        });
        drawingManager.setMap(null);
        for (i = 0; i < markers.length; i++) {
            if (!(circle.getBounds().contains(markers[i].getPosition())))
            {
                markers[i].setMap(null);
                $('#prop' + i).hide();
            } else {
                markers[i].setMap(map);
                $('#prop' + i).show();

            }
        }

    });

     google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
        var radius = circle.getRadius();
        drawingManager.setOptions({
            drawingControl: false
        });
        drawingManager.setMap(null);
        redondo = circle;
        google.maps.event.addListener(redondo, 'radius_changed', function () {

            for (i = 0; i < markers.length; i++) {
                if (!(circle.getBounds().contains(markers[i].getPosition())))
                {
                    markers[i].setMap(null);
                    $('#prop' + i).hide();
                } else {
                    markers[i].setMap(map);
                    $('#prop' + i).show();
                }
            }
        });
        google.maps.event.addListener(redondo, 'center_changed', function () {

            for (i = 0; i < markers.length; i++) {
                if (!(circle.getBounds().contains(markers[i].getPosition())))
                {
                    markers[i].setMap(null);
                    $('#prop' + i).hide();
                } else {
                    markers[i].setMap(map);
                    $('#prop' + i).show();
                }
            }
        });
    });

这是圆形,相同的矩形。 希望这会起作用。