Question

我正在使用Google Maps API V3在Google地图中进行多边形的自由形式绘制，而不是标准库附带的标准点击多边形。一切都很好。

问题：多边形会产生许多可编辑的点。

如何在需要时简化多边形并创建可编辑点？

这里是我的代码：

var latlng = new google.maps.LatLng(46.779231, 6.659431);

        var options = {
            center: latlng,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable:false
        };


        var map = new google.maps.Map(document.getElementById("map"), options);

        var markers = [];

        var isDrawing = false;
        var overlay = new google.maps.OverlayView();
        overlay.draw = function () {};
        overlay.setMap(map);
        var polyLine;
        var parcelleHeig = Array();
        google.maps.event.addListener(map, 'mousedown', function () {
                isDrawing=true;
                polyLine = new google.maps.Polyline({
                    map: map
                });
                $("#map").mousemove(function (e) {
                    if(isDrawing == true)
                    {
                        var pageX = e.pageX;
                        var pageY = e.pageY;
                        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

                        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);

                        polyLine.getPath().push(latLng);

                        latLng = String(latLng);
                        latLng=latLng.replace("(","");
                        latLng=latLng.replace(")","");

                        var array_lng =  latLng.split(',');
                        parcelleHeig.push(new google.maps.LatLng(array_lng[0],array_lng[1])) ;
                    }
                });
        });
        google.maps.event.addListener(map, 'mouseup', function () {

            isDrawing=false;
            //console.log(parcelleHeig);

            var polygoneParcelleHeig = new google.maps.Polygon({
                paths: parcelleHeig,
                strokeColor: "#0FF000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#0FF000",
                fillOpacity: 0.35,
                editable:true,
                geodesic: false

            });

            parcelleHeig=Array();
            polygoneParcelleHeig.setMap(map);
            polyLine.setMap(null);
        });

http://jsfiddle.net/kevdiho/yKHs4/

Answer 1

以下是我使用的内容：http://jsfiddle.net/uF62D/1/

您可以更改变量douglasPeuckerThreshold的值，以更改算法的简化级别。

注意：这是我根据此网址https://gist.github.com/adammiller/826148找到的代码创建的版本（已更新，以便在不同的缩放级别获得相同的“视觉”简化级别）

谷歌地图上的自由形式绘图

1 个答案: