Dessin de polygone et obtention des coordonnées avec L'API de Google Map V3 [fermé]
j'essaie de développer une application en utilisant L'API V3 de Google Maps. Ce que j'essaie de faire, c'est d'abord de laisser l'utilisateur dessiner un polygone sur une carte Google et d'obtenir ses coordonnées de polygone et de les sauvegarder dans une base de données. Je montrerai ensuite l'utilisateur enregistré coordonnées.
Je ne sais pas comment laisser les utilisateurs dessiner polygon sur une carte Google avec API v3 et ensuite obtenir les coordonnées. Si je peux obtenir ces coordonnées, il est facile de les enregistrer dans un la base de données.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html est presque l'exemple exact mais il utilise API v2 et ne donne pas de coordonnées. Je veux utiliser API v3 et être capable d'obtenir toutes les coordonnées.
Existe-t-il des exemples de dessin de polygone et d'obtention de ses coordonnées avec API v3?
10 réponses
si vous n'avez besoin que des coordonnées, voici un outil de dessin que j'aime utiliser - déplacez le polygone ou reformez-le et les coordonnées s'afficheront juste au-dessous de la carte: jsFiddle ici.
aussi, voici 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;
}
Eh bien, malheureusement, il semble qu'on ne puisse pas placer des repères personnalisés et dessiner (et obtenir des coordonnées) directement à partir maps.google.com si on est anonyme/pas connecté (comme c'était possible il y a quelques années, si je me souviens bien). Pourtant, grâce aux réponses ici, j'ai réussi à faire une combinaison d'exemples qui ont à la fois la recherche de places Google, et permet de dessiner via la bibliothèque de dessin, et vide des coordonnées après avoir fait une sélection de n'importe quel type de forme (y compris les coordonnées pour le polygone) qui peut être copypasted; le code est ici:
C'est quoi ça ressemble:
(les marqueurs de lieux sont traités séparément, et peuvent être supprimés via le bouton DEL "par l'élément de formulaire de recherche;" curpos "montre le centre actuel [position] et le niveau de zoom de la map viewport).
il est plus propre/plus sûr d'utiliser les getters fournis par google au lieu d'accéder aux propriétés comme certains l'ont fait
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
pour accomplir ce que vous voulez, vous devez obtenir des chemins du polygone. Les chemins seront un tableau de points de LatLng. vous obtenez les éléments du tableau et divisez les paires de LatLng avec les méthodes .lat et .lng dans la fonction ci-dessous, j'ai un réseau redondant correspondant à un polyligne qui marque le périmètre autour du polygone.
enregistrement est une autre histoire. vous pouvez alors opter pour de nombreuses méthodes. vous pouvez enregistrer votre liste de points comme une chaîne formatée par csv et l'exporter dans un fichier (solution la plus facile, de loin). je recommande fortement les formats GPS TXT, comme ceux (Il y en a 2) lisibles par GPS TRACKMAKER (grand logiciel de version libre). si vous êtes compétent pour les sauvegarder dans une base de données, c'est une excellente solution (je fais les deux, pour la redondance).
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;
}
attention, la ligne qui se termine par ",1" (par opposition à "0") commence un nouveau polygone (ce format vous permet d'enregistrer plusieurs polygones dans le même fichier). je trouve que TXT est plus lisible que les formats basés sur XML GPX et KML.
les autres réponses vous montrent de créer les polygones, mais pas comment obtenir les coordonnées...
je ne suis pas sûr de la meilleure façon de le faire, mais voici une façon.. Il semble qu'il devrait y avoir une méthode pour obtenir les chemins du polygone, mais je ne peux pas en trouver un, et getPath() ne semble pas fonctionner pour moi. Donc voici une approche manuelle qui a fonctionné pour moi..
Une fois que vous avez terminé de dessiner votre polygone, et passer dans votre polygone à la fonction complète de superposition, vous pouvez trouver coordonnées du polygone.superposition.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
});
});
remarque, j'utilise jquery pour faire une boucle sur la liste des coordonnées, mais vous pouvez le faire en boucle.
ajouter à la réponse de Gisheri
le code suivant a fonctionné pour moi
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
});
depuis Google met parfois à jour le nom des propriétés des objets fixes, la meilleure pratique est D'utiliser les méthodes V3 GMaps pour obtenir des coordonnées événement.superposition.getPath ().getArray () et pour obtenir lat latlng.lat () et gnl latlng.lng().
donc, je voulais juste améliorer cette réponse un peu d'illustration avec polygon et POSTGIS insert case scenario:
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')
});
nettoyé ce que chuycepeda A et le mettre dans un textarea pour le renvoyer dans un formulaire.
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);
});
essayez ceci
Dans votre controller
> $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>