2014-03-31 16 views
7

enter image description hereGoogle Map Zeichnung freihändig

AKTUELLE CODE - http://jsfiddle.net/YsQdh/88/ -

Diese Version verwendet gDouglasPeuker eine rudamentary Polygonform aus der gezeichneten Version zu erstellen - http://jsfiddle.net/YsQdh/94/

^dies deaktiviert die Karte für das Zeichnen und aktiviert es nach dem Erstellen der Form erneut.

Ich arbeite an einer Google Map-Anwendung. Im Gegensatz zu einer Polygon-Point-and-Click-Übung. Ich möchte eine Form zeichnen können, die dann in ein Polygon umgewandelt wird.

Hier ist meine neueste Anwendung - http://jsfiddle.net/Cbk9J/168/

ich den folgenden Code gefunden haben - aber ich bin nicht sicher, wie dies in dem Beispiel zu integrieren. Ich habe keine Dokumentation zur freien Handzeichnung gefunden und bin mir nicht sicher, ob diese Funktionen im Zeichnungsmanager von Google Maps vorhanden sind.

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() ]]; 
        }) 
       ]; 
      }); 
     } 
    } 
} 
+0

Ihr Beispiel scheint, dass mir zu arbeiten Sie freihändig Polygonzeichnungs haben . Ich bin mir nicht sicher, ob ich verstehe, was du sonst noch brauchst. –

+0

Es ist nicht wie vorgesehen fertig - ich möchte in der Lage sein, freihändig zu zeichnen - nicht auf die Polygonpunkte zu klicken - zeichne eine Form wie Farbe. Dann habe es polygonisiert. –

+0

http://www.zoopla.co.uk/for-sale/map/property/london/?include_retiement_homes=true&include_shared_ownership=true&new_homes=include&q=london&results_sort=highest_price&search_source=home&pn=1&view_type=map - gefällt das –

Antwort

0

Die neueste Antwort - http://jsfiddle.net/YsQdh/94/

Dieser enthält den gDouglasPeuker Algorithmus

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

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>

+0

Dank dude! Es hat wirklich mein Leben gerettet! – erdemildiz

+0

@erdemildiz willkommen Bruder, bitten Sie jederzeit um Hilfe –

+0

gibt es eine Möglichkeit, dies auf mobilen Geräten zu unterstützen? – Mike