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

Question

我使用谷歌地图API V3在谷歌地图中做一些多边形的自由形式绘图,而不是标准库附带的标准点击多边形.一切都很好.

问题:多边形生成许多可编辑点.

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

我的代码:

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以更改算法的简化级别.

注意:这是我根据此URL上的代码创建的版本https://gist.github.com/adammiller/826148(已更新为在不同缩放级别获得相同的"视觉"简化级别)