Google Map Drawing徒手画

Question

最新代码 - http://jsfiddle.net/YsQdh/88/ -

此版本使用gDouglasPeuker从绘制的版本创建一个rudamentary多边形形状 - http://jsfiddle.net/YsQdh/94/

^这会禁用绘图地图，并在创建形状后再次启用它。

我正在开发一个谷歌地图应用程序。而不是多边形点和单击练习。我希望能够绘制一个形状 - 然后将其转换为多边形。

这是我最近的申请 - http://jsfiddle.net/Cbk9J/168/

我找到了以下代码 - 但我不确定如何将其合并到示例中。我没有找到任何免费手绘的文档，我不确定谷歌地图绘图管理器中是否存在这些功能。

    var completeFreehand = function (changed) {
        if (changed) {
            isUserPolygon = true;
            updateLocation();
        }

        unhighlightControls();
        showMessages();
        updateListingResults();
    };

    var completeDelete = function() {
        map.endDeleteSearchArea();
        unhighlightControls();
        showMessages();
    };

    var cancelDelete = function() {
        if (map.isDeletingSearchArea()) {
            completeDelete();
            updateListingResults();
            enableControls();
        }
        return false;
    };

    var cancelFreehand = function () {
        if (map.isDrawingFreehand()) {
            map.cancelFreehand();
            completeFreehand();
            enableControls();
        }
    };

    var clearMap = function (silent) {
        map.clearSearchArea(silent);
        mostRecentPinCount = 0;
        enableControls();
        map.clearMarkers(true);

        return false;
    };

    var drawFreehand = function (element) {

        if (map.isDrawingFreehand()) {

            cancelFreehand();
            return;

        } else if (map.isDeletingSearchArea()) {

            completeDelete();

        }

        disableControls(true);
        highlightControl(element);
        hideMessages();

        if ( $(element).hasClass('js-maps-btn-add') ) {
            $('.js-maps-status-message-draw').removeClass('is-hidden');
        } else {
            $('.js-maps-status-message-new').removeClass('is-hidden');
        }

        map.clearMarkers();
        map.drawFreehand(completeFreehand);
        updateBasePolygon();

        return false;
    };




function updateBasePolygon () {
    if (typeof(basePolygon) == 'undefined') {
        var polys = map.getPolygons();
        if (polys.length) {
            basePolygon = $.map(polys, function (val, i) {
                var a = val.getPath().getArray();
                return [
                    $.map(a, function (val, i) {
                        return [[ val.lat(), val.lng() ]];
                    })
                ];
            });
        }
    }
}

Answer 1

＆＃13;

＆＃13;

html,body{height:100%;margin:0}
#map_canvas{height:500px; width:100%;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>

<div id="drawpoly"><a href="#">Click Here To Draw On Map</a></div>

<div id="map_canvas"></div>

＆＃13;

dev3->content->->mktg->->->pls1->->->pls2->->->config->->splash

＆＃13;

＆＃13;

＆＃13;

Answer 2

最新答案 - http://jsfiddle.net/YsQdh/94/

这包含gDouglasPeuker算法

var theArrayofLatLng = path.j;
var ArrayforPolygontoUse= GDouglasPeucker(theArrayofLatLng,50); 
console.log("ArrayforPolygontoUse", ArrayforPolygontoUse);        


var polyOptions = {
    map: map,
    fillColor: '#0099FF',
    fillOpacity: 0.7,
    strokeColor: '#AA2143',
    strokeWeight: 2,
    clickable: false,
    zIndex: 1,
    path:ArrayforPolygontoUse,
    editable: false
}