Glisser-déplacer (move) un polygone à l'aide de Google Maps v3

J'ai trouvé les Cartes Google maps V2 Polygone de mise en Œuvre pour être très limitant pour les besoins que j'ai eu et résolu par la création d'un overlays. Mon groupe est actuellement bloqué sur IE6 donc je n'ai pas encore migrer vers Google Maps V3 - mais en prenant un coup d'oeil rapide à l'API montre que vous pourriez probablement faire quelque chose de similaire que j'ai fait dans la V2 à la V3.

Essentiellement l'idée est la suivante:

1. Créer un overlays
2. Remplir avec vos propres SVG/VML Polygones et y attacher un événement glisser la personnalisation de l'objet polygone

---

Personnalisé Superpositions:

Voici quelques informations pour vous aider à démarrer sur faire votre propre coutume de superposition:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

---

De la création de votre propre "Déplaçables" Objet Polygone:

Une fois que vous obtenez ce vers le bas, vous aurez envie d'ajouter vos propres polygones pour les overlays au lieu d'utiliser GPolygons. Je suis passé par le processus douloureux de l'apprentissage SVG/VML et la rédaction d'une bibliothèque de pont SVG/VML ensemble, vous pourriez le faire, mais je recommande de commencer par essayer d'utiliser une autre bibliothèque comme Raphaël.

http://raphaeljs.com/

À l'aide de Raphaël permettra d'économiser que vous beaucoup de temps à essayer de comprendre comment obtenir de la croix-navigateur Graphique Vectoriel (Polygone) la fonctionnalité et le meilleur de tous, il prend en charge le glisser événements déjà, voici un exemple à partir de leur bibliothèque:

http://raphaeljs.com/graffle.html

Une fois que vous avez personnalisé de superposition et vous êtes en mesure de jeter un peu de Raphaël objets sur la dernière étape consiste à traduire les coordonnées que vous voulez à partir d'un Lat/Lng de la valeur à une valeur de Pixel. Il est disponible dans le MapCanvasProjection de la V3:

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

Vous pouvez utiliser fromLatLngToDivPixel de comprendre que les valeurs de pixel pour les points sur votre Raphaël polygone, de la dessiner, puis l'ajouter à la superposition avec un événement glisser.

OriginalL'auteur John

Voici comment je le fais. Trouver le centre approximatif du polygone, et ajouter un marqueur, puis ajouter un glisser-auditeur à la marque. Sur lat/lng modifier, soustraire la différence de l'original marqueur lat/lng, soustraire la différence de chacun des chemins, ensuite, définir la position d'origine à la nouvelle position. Assurez-vous que l'option javascript de votre appel d'api que vous avez bibliothèque=géométrie,dessin

google.maps.event.addListener(draw, 'overlaycomplete', function(shape) {
//POLYGON
if (shape.type == 'polygon') {
var bounds = new google.maps.LatLngBounds(); var i;  
var path = shape.overlay.getPath();
for (i = 0; i < path.length; i++) { bounds.extend(path.getAt(i)); }
shape.latLng = bounds.getCenter();
marker = getMarker(map,shape);
shape.overlay.marker = marker;
markers.push(marker); 
}
google.maps.event.addListener(marker, 'drag', function(event) {
shape.overlay.move(event.latLng, shape, path);
});
google.maps.event.addListener(shape.overlay, 'rightclick', function() {
this.setMap(null);
this.marker.setMap(null);
draw.setDrawingMode('polygon');
});
});
}
google.maps.Polygon.prototype.move = function(latLng, shape, p) {
var lat = latLng.lat();
var lng = latLng.lng();
latDiff = shape.latLng.lat()-lat;
lngDiff = shape.latLng.lng()-lng;
for (i = 0; i < p.length; i++) {
pLat = p.getAt(i).lat();
pLng = p.getAt(i).lng();
p.setAt(i,new google.maps.LatLng(pLat-latDiff,pLng-lngDiff));
}
shape.latLng = latLng; 
}
function getMarker(map,shape){
var infowindow = new google.maps.InfoWindow();
if(shape.type=='polygon'){ latLng = shape.latLng; }
marker = new google.maps.Marker({
position: latLng,
map:map,
draggable:true,
clickable: true,
animation: google.maps.Animation.DROP
});
shape.overlay.marker = marker;
shape.overlay.bindTo('center',marker,'position');
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent('polygon');
infowindow.open(map, marker);
toggleBounce(marker);
}
})(marker));
google.maps.event.addListener(infowindow,'closeclick', (function(marker) {      
return function() {
marker.setAnimation(null);
}
})(marker));
return marker;
}

Si vous avez des questions, n'hésitez pas à me contacter.

OriginalL'auteur Eric Leroy

Ok - donc après avoir vu le site que vous essayez de mettre en œuvre, j'ai commencé à sentir comme Raphael peut ne pas être nécessaire, car il est assez lourd Bibliothèque JS - et si vous essayez seulement de dessiner un rectangle, polygone, j'ai pensé, pourquoi ne pas simplement le faire avec un seul léger DIV à la place?

Cependant, je pense que le Raphaël solution serait encore contenir de l'eau pour de nombreux autres cas - donc je pense que je vais juste poster une autre réponse possible.

Voici un exemple de travail j'ai jeté:

http://www.johnmick.net/drag-div-v3/

N'hésitez pas à jeter un coup d'oeil à la source:

http://www.johnmick.net/drag-div-v3/js/main.js

Pour l'essentiel, nous ne les suivants

1. Créer les overlays
2. Créer le déplaçable div polygone et, à l'aide de jQuery UI, rendre déplaçable
3. Cravate un événement qui est à l'écoute lors de ce déplacement a arrêté que les mises à jour de la LatLng position du rectangle
4. Ajouter l'objet à la overlays
5. Mettre en œuvre la fonction draw pour redessiner le rectangle au cours des zooms et des casseroles

Actuellement, je ne suis que de stocker une LatLng valeur pour le Rectangle (le coin en haut à gauche) - vous pouvez facilement étendre cet exemple de stocker toutes les 4 points du rectangle et ont la forme de redimensionner dynamiquement sur les zooms. Vous pouvez le faire, sinon en tant qu'utilisateurs de zoom, elles pourront obtenir un climat de plus en plus grande de la région.

OriginalL'auteur John