Disegna poligono usando il mouse su google maps

Question

Ho bisogno di disegnare poligono usando il mouse e segnare una particolare area su Google maps. Lo scopo è contrassegnare un'area su Google Maps e quindi mostrare hotel e attrazioni in quella zona. L'utente segnerà gli hotel sulla mappa di Google durante la creazione in modo che i db abbiano la loro latitudine e longitudine.

Come posso disegnare il poligono e riempirlo con un colore come sfondo per contrassegnare l'area in Google Maps? Ho letto il Manuale dell'API "come disegnare i poligoni?" In pratica dovresti segnare più punti e poi combinarli in un poligono. Ma dovrò farlo usando il trascinamento del mouse, proprio come disegnare una forma. Gentilmente aiutami a raggiungere questo obiettivo.

Answer 1

puoi utilizzare gli strumenti di modifica del poligono di Google MyMaps nella tua applicazione, forse questo sarà ok per te?

vedere http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html

Tuttavia, se si desidera implementare da soli è fondamentalmente questo:

add click ascoltatore per mappare.

ripetizione: punti negozio che l'utente fa clic su in un array e aggiunge un marcatore a questo punto. se è il primo marcatore aggiungere click ascoltatore ad esso

quando l'utente fa clic sul primo marcatore, analizzare utilizzare la matrice di punti per costruire il tuo poligono

non ho alcun codice per mostrare voi, ma io ho implementato questo io stesso in una società precedente, quindi può essere fatto :)

Answer 2

Si consiglia di controllare il Geometry Controls del GMaps Utility Library.

Per ulteriori riferimenti, è possibile passare allo GeometryControls Reference.

Answer 3

Ecco un codice (per la versione 3 dell'API di JavaScript di Google Maps) che raggiunge ciò che desideri. Supporta:

• fare clic per aggiungere i vertici.
• facendo nuovamente clic sul primo vertice per chiudere il percorso.
• trascinamento dei vertici.

Non è documentato, ma si spera che si possa vedere ciò che sta facendo abbastanza facilmente.

$(document).ready(function() { 
    var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true }); 
    var isClosed = false; 
    var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); 
    google.maps.event.addListener(map, 'click', function (clickEvent) { 
     if (isClosed) 
      return; 
     var markerIndex = poly.getPath().length; 
     var isFirstMarker = markerIndex === 0; 
     var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true }); 
     if (isFirstMarker) { 
      google.maps.event.addListener(marker, 'click', function() { 
       if (isClosed) 
        return; 
       var path = poly.getPath(); 
       poly.setMap(null); 
       poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); 
       isClosed = true; 
      }); 
     } 
     google.maps.event.addListener(marker, 'drag', function (dragEvent) { 
      poly.getPath().setAt(markerIndex, dragEvent.latLng); 
     }); 
     poly.getPath().push(clickEvent.latLng); 
    }); 
}); 

Answer 4

L'API v3 di Google Maps JavaScript fornisce una libreria di disegno, http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

Hai solo bisogno di attivare gli strumenti di disegno (come mostrato l'esempio nella documentazione) e aggiungere listener di eventi per la creazione di overlay tipi (come mostrato nella sezione "Eventi di disegno").

Un rapido esempio del suo utilizzo sarebbe: http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

Answer 5

c'è un porto degli strumenti di disegno API v2 per API v3 @http://nettique.free.fr/gmap/toolbar.html

Answer 6

La nuova mappa Motori Lite è esattamente lo strumento che stai cercando perché penso: https://mapsengine.google.com/map/

Answer 7

Ci sono stati alcuni miglioramenti significativi in ​​google.maps.polygon poiché questa domanda è stata posta per prima. Ecco una semplice implementazione, utilizzando tutti gli strumenti nativi di google.maps v3. (Nota: c'è un wonky lavoro ambito JavaScript qui intorno ... ma funziona ...)

var listener1 = google.maps.event.addListener(map, "click", function(e) { 
    var latLng = e.latLng; 
    var myMvcArray = new google.maps.MVCArray(); 
    myMvcArray.push(latLng); // First Point 
    var myPolygon = new google.maps.Polygon({ 
     map: map, 
     paths: myMvcArray, // one time registration reqd only 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2, 
     fillColor: "#FF0000", 
     fillOpacity: 0.10, 
     editable: true, 
     draggable: false, 
     clickable: true 
    }); 
    google.maps.event.removeListener(listener1); 

    var listener2 = google.maps.event.addListener(map, 'click', function(e) { 
     latLng = e.latLng; 
     myMvcArray.push(latLng); 
     myMvcArray.getArray().forEach(function(value, index) { 
      console.log(" index: " + index + " value: " + value); 
     }) 
    }); 
}); 

risposta con il nuovo codice presentato il vecchia questione nel caso in cui nessun altro arriva qui!

Answer 8

ho fatto un esempio per me stesso. il codice è qui sotto e anche jsfiddle è avaible

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script> 

<script> 

function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
center: { 
    lat: -34.397, 
    lng: 150.644 
}, 
zoom: 8 
}); 

var drawingManager = new google.maps.drawing.DrawingManager({ 
drawingMode: google.maps.drawing.OverlayType.POLYGON, 
drawingControl: false, 
drawingControlOptions: { 
    position: google.maps.ControlPosition.TOP_CENTER, 
    drawingModes: ['polygon', 'circle'] 
}, 
polygonOptions: { 
    editable: true 
} 

}); 
drawingManager.setMap(map); 

google.maps.event.addListener(drawingManager, 'overlaycomplete', 
function(event) { 
event.overlay.set('editable', false); 
drawingManager.setMap(null); 
console.log(event.overlay); 
}); 

} 
</script> 

https://jsfiddle.net/zgmdvsrz/

è possibile impostare drawingcontrol su true se si desidera mostrare Drawing Manager

Answer 9

Ho usato seguente codice per disegnare poligoni su una mappa

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="UTF-8"> 
<title>Drawing Tools</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> 
<style type="text/css"> 
    #map, html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    } 
    #panel { 
    width: 200px; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    float: right; 
    margin: 10px; 
    } 
    #color-palette { 
    clear: both; 
    } 
    .color-button { 
    width: 14px; 
    height: 14px; 
    font-size: 0; 
    margin: 2px; 
    float: left; 
    cursor: pointer; 
    } 
    #delete-button { 
    margin-top: 5px; 
    } 
    #map_canvas { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
} 

</style> 
<script type="text/javascript"> 
var geocoder; 
var map; 
var all_overlays = []; 

function initialize() { 
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), { 
    center: new google.maps.LatLng(37.4419, -122.1419), 
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

var polyOptions = { 
    strokeWeight: 0, 
    fillOpacity: 0.45, 
    editable: true, 
    fillColor: '#FF1493' 
    }; 
var selectedShape; 

var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.POLYGON, 
      drawingControl: false, 
      markerOptions: { 
      draggable: true 
     }, 
    polygonOptions: polyOptions 
    }); 

    $('#enablePolygon').click(function() { 
     drawingManager.setMap(map); 
     drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON); 
    }); 

    $('#resetPolygon').click(function() { 
     if (selectedShape) { 
      selectedShape.setMap(null); 
      } 
     drawingManager.setMap(null); 
     $('#showonPolygon').hide(); 
     $('#resetPolygon').hide(); 
    }); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', 

    function(polygon) { 
     // var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath()); 
     // $('#areaPolygon').html(area.toFixed(2)+' Sq meters'); 
     $('#resetPolygon').show(); 
    }); 

    function clearSelection() { 
     if (selectedShape) { 
      selectedShape.setEditable(false); 
      selectedShape = null; 
     } 
    } 


    function setSelection(shape) { 
      clearSelection(); 
      selectedShape = shape; 
      shape.setEditable(true); 
    } 

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
all_overlays.push(e); 
if (e.type != google.maps.drawing.OverlayType.MARKER) { 
    // Switch back to non-drawing mode after drawing a shape. 
    drawingManager.setDrawingMode(null); 

    // Add an event listener that selects the newly-drawn shape when the user 
    // mouses down on it. 
    var newShape = e.overlay; 
    newShape.type = e.type; 
    google.maps.event.addListener(newShape, 'click', function() { 
    setSelection(newShape); 
    }); 
    setSelection(newShape); 
    } 
}); 

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { 
var coordinates = (polygon.getPath().getArray()); 
console.log(coordinates); 
alert(coordinates); 
}); 
} 
google.maps.event.addDomListener(window, "load", initialize); 
</script> 
</head> 
    <body> 
    <input type="button" id="enablePolygon" value="Calculate Area" /> 
    <input type="button" id="resetPolygon" value="Reset" style="display: none;" /> 
    <div id="showonPolygon" style="display:none;"><b>Area:</b> <span 
    id="areaPolygon">&nbsp;</span></div> 
    <div id="map_canvas"></div> 
    </html> 

Uscita: