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

free form drawing on a google maps

本文关键字:绘图 自由 谷歌地图      更新时间:2023-09-26

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

问题:面会生成大量可编辑点。

如何简化面并在需要时创建可编辑点?

这是我的代码:

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/

这是我

正在使用的: http://jsfiddle.net/uF62D/1/

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

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