google maps - obtener - Dibujo de polígonos y obtención de coordenadas con Google Map API v3
meter coordenadas a google maps (10)
Intento desarrollar una aplicación usando Google Maps API v3. Lo que estoy tratando de hacer es; primero deje que el usuario dibuje un polígono en un Mapa de Google y obtenga las coordenadas de su polígono y guárdelas en una base de datos. Luego mostraré las coordenadas guardadas por el usuario.
No sé cómo dejar que los usuarios dibujen un polígono en un mapa de Google con API v3 y luego obtener las coordenadas. Si puedo obtener esas coordenadas, es fácil guardarlas en una base de datos.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html es casi el ejemplo exacto pero usa API v2 y no da coordenadas. Quiero usar API v3 y ser capaz de obtener todas las coordenadas.
¿Hay algún ejemplo de dibujo de polígono y obteniendo sus coordenadas con API v3?
Añadiendo a la respuesta de Gisheri
El siguiente código funcionó para mí
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
icon: ''images/beachflag.png''
},
circleOptions: {
fillColor: ''#ffff00'',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
google.maps.event.addListener(drawingManager, ''overlaycomplete'', function(polygon) {
//console.log(polygon.overlay.latLngs.j[0].j);return false;
$.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
var LatLongs = LatLongsObject;
var lat = LatLongs.k;
var lon = LatLongs.B;
console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates
});
Aquí tienes el ejemplo anterior usando API V3
Bueno, desafortunadamente parece que uno no puede colocar marcadores personalizados y dibujar (y obtener coordenadas) directamente desde maps.google.com si uno es anónimo / no inició sesión (como fue posible hace algunos años, si no recuerdo mal). Aún así, gracias a las respuestas aquí, logré hacer una combinación de ejemplos que tiene tanto la búsqueda de Google Places, y permite dibujar a través de la biblioteca de dibujo, como las coordenadas al hacer una selección de cualquier tipo de forma (incluidas las coordenadas del polígono) que puede ser copiado; el código está aquí:
Así es como esto luce:
(Los marcadores de Lugares se manejan por separado y pueden borrarse mediante el "botón" DEL mediante el elemento de formulario de entrada de búsqueda; "curpos" muestra el centro actual [posición] y el nivel de zoom de la ventana gráfica del mapa).
Dado que Google actualiza a veces el nombre de las propiedades de los objetos fijos, la mejor práctica es utilizar los métodos GMaps V3 para obtener las coordenadas event.overlay.getPath (). GetArray () y obtener lat latlng.lat () y lng latlng.lng () .
Por lo tanto, solo quería mejorar esta respuesta ejemplificando un poco con el escenario de inserción de polígono y POSTGIS:
google.maps.event.addListener(drawingManager, ''overlaycomplete'', function(event) {
var str_input =''POLYGON(('';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
console.log(''polygon path array'', event.overlay.getPath().getArray());
$.each(event.overlay.getPath().getArray(), function(key, latlng){
var lat = latlng.lat();
var lon = latlng.lng();
console.log(lat, lon);
str_input += lat +'' ''+ lon +'','';
});
}
str_input = str_input.substr(0,str_input.length-1) + ''))'';
console.log(''the str_input will be:'', str_input);
// YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
// INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), ''Test'')
});
Es más limpio / más seguro usar los getters provistos por google en lugar de acceder a las propiedades como lo hicieron algunos
google.maps.event.addListener(drawingManager, ''overlaycomplete'', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
Las otras respuestas te muestran cómo crear los polígonos, pero no cómo obtener las coordenadas ...
No estoy seguro de cuál es la mejor manera de hacerlo, pero de una manera ... Parece que debería haber un método para obtener las rutas desde el polígono, pero no puedo encontrar una, y getPath () no parece para trabajar para mi Así que aquí hay un enfoque manual que funcionó para mí ...
Una vez que haya terminado de dibujar su polígono y pase su polígono a la función de superposición completa, puede encontrar las coordenadas en el polígono.overlay.latLngs.b [0] .b
google.maps.event.addListener(drawingManager, ''overlaycomplete'', function(polygon) {
$.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
var lat = latlng.d;
var lon = latlng.e;
console.log(lat, lon); //do something with the coordinates
});
});
nota, estoy usando jquery para recorrer la lista de coordenadas, pero puedes hacer loop sin embargo.
Limpiar lo que tiene chuycepeda y ponerlo en un área de texto para enviar de vuelta en un formulario.
google.maps.event.addListener(drawingManager, ''overlaycomplete'', function (event) {
var str_input = ''{'';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
$.each(event.overlay.getPath().getArray(), function (key, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
str_input += lat + '', '' + lon + '','';
});
}
str_input = str_input.substr(0, str_input.length - 1) + ''}'';
$(''textarea#Geofence'').val(str_input);
});
Para lograr lo que desea, debe obtener Ptos del polígono. Las rutas serán una matriz de puntos LatLng. usted obtiene los elementos de la matriz y divide los pares LatLng con los métodos .lat y .lng en la función siguiente, tengo una matriz redundante que corresponde a una polilínea que marca el perímetro alrededor del polígono.
el ahorro es otra historia. a continuación, puede optar por muchos métodos. Puede guardar su lista de puntos como una cadena formateada en csv y exportarla a un archivo (la solución más fácil, de lejos). Recomiendo mucho los formatos GPS TXT, como los que (hay 2) legibles por GPS TRACKMAKER (gran software de versión gratuita). si usted es competente para guardarlos en una base de datos, esa es una gran solución (hago ambas cosas, para redundancia).
function areaPerimeterParse(areaPerimeterPath) {
var flag1stLoop = true;
var areaPerimeterPathArray = areaPerimeterPath.getPath();
var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0/r/n";
var counter01 = 0;
var jSpy = "";
for (var j = 0;j<areaPerimeterPathArray.length;j++) {
counter01++;
jSpy += j+" ";
if (flag1stLoop) {
markerListParsedTXT += ''TP,D,''+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join('','')+'',00/00/00,00:00:00,1''+''/r/n'';
flag1stLoop = false;
} else {
markerListParsedTXT += ''TP,D,''+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join('','')+'',00/00/00,00:00:00,0''+''/r/n'';
}
}
// last point repeats first point
markerListParsedTXT += ''TP,D,''+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join('','')+'',00/00/00,00:00:00,0''+''/r/n'';
return markerListParsedTXT;
}
atención, la línea que termina con ", 1" (en oposición a ", 0") comienza un nuevo polígono (este formato le permite guardar varios polígonos en el mismo archivo). Encuentro TXT más legible para humanos que los formatos basados en XML GPX y KML.
Si todo lo que necesita son las coordenadas, aquí hay una herramienta de dibujo que me gusta usar: mover el polígono o darle forma y las coordenadas se mostrarán justo debajo del mapa: jsFiddle aquí .
Además, aquí hay un Codepen
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById(''map-canvas''),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: ''#FF0000'',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ''#FF0000'',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById(''info'').innerHTML = htmlStr;
}
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
prueba esto
En tu uso de controlador
> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
>
> function onMapOverlayCompleted(e) {
>
> e.overlay.getPath().getArray().forEach(function (position) {
> console.log(''lat'', position.lat());
> console.log(''lng'', position.lng());
> });
>
> }
**In Your html page , include drawning manaer**
<ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
tilt="45"
heading="90">
<drawing-manager
on-overlaycomplete="onMapOverlayCompleted()"
drawing-control-options="{position: ''TOP_CENTER'',drawingModes:[''polygon'',''circle'']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:''www.example.com/icon''}"
rectangleOptions="{fillColor:''#B43115''}"
circleOptions="{fillColor: ''#F05635'',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>