谷歌地圖繪製寫意

Question

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

這個版本使用gDouglasPeuker從畫版創建rudamentary多邊形 - http://jsfiddle.net/YsQdh/94/

^這禁用地圖用於繪圖，創建形狀後再次啓用它。

我正在研究谷歌地圖應用程序。與多邊形點和點擊練習相反。我希望能夠繪製一個形狀 - 然後將其轉換爲多邊形。

這裏是我的最新應用 - http://jsfiddle.net/Cbk9J/168/

我發現下面的代碼 - 但我不能確定如何納入例子這一點。我還沒有找到任何文檔來釋放手繪，並且我不確定這些功能是否存在於Google地圖繪製管理器中。

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

最新答案 - 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 
} 

Answer 2

function drawFreeHand() 
 
{ 
 

 
    //the polygon 
 
    poly=new google.maps.Polyline({map:map,clickable:false}); 
 
    
 
    //move-listener 
 
    var move=google.maps.event.addListener(map,'mousemove',function(e){ 
 
     poly.getPath().push(e.latLng); 
 
    }); 
 
    
 
    //mouseup-listener 
 
    google.maps.event.addListenerOnce(map,'mouseup',function(e){ 
 
     google.maps.event.removeListener(move); 
 
     var path=poly.getPath(); 
 
     poly.setMap(null); 
 
     poly=new google.maps.Polygon({map:map,path:path}); 
 
     
 
     
 
     google.maps.event.clearListeners(map.getDiv(), 'mousedown'); 
 
     
 
     enable() 
 
    }); 
 
} 
 

 
function disable(){ 
 
    map.setOptions({ 
 
    draggable: false, 
 
    zoomControl: false, 
 
    scrollwheel: false, 
 
    disableDoubleClickZoom: false 
 
    }); 
 
} 
 

 
function enable(){ 
 
    map.setOptions({ 
 
    draggable: true, 
 
    zoomControl: true, 
 
    scrollwheel: true, 
 
    disableDoubleClickZoom: true 
 
    }); 
 
} 
 

 

 
function initialize() 
 
{ 
 
    var mapOptions = { 
 
    zoom: 14, 
 
    center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
     
 
    //draw 
 
    $("#drawpoly a").click(function(e) { 
 
    e.preventDefault(); 
 

 
    disable() 
 

 
    google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){ 
 
     drawFreeHand() 
 
    }); 
 

 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

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

<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>