Arrastre (mueva) un polígono usando Google Maps v3

Question

El Google Maps API para un polígono no ofrece un método de arrastre.

¿Cuál sería una forma eficiente de implementar dicha función (es decir, suficientemente optimizada para que no matara a una computadora portátil de cuatro años)?

Gracias!

Answer 1

Encontré que la implementación de polígonos de Google Maps V2 es muy limitante para las necesidades que he tenido y lo resolví creando una superposición personalizada. Mi grupo actualmente está atascado en IE6, por lo que aún no he migrado a Google Maps V3, pero echar un vistazo rápido a la API muestra que probablemente podrías hacer algo similar a lo que hice en V2 con V3.

Básicamente la idea es:

1. Crear una plantilla personalizada
2. rellenarlo con sus propios SVG/Polígonos VML y adjuntar un evento de arrastre para este objeto polígono personalizada

---

Superposiciones personalizadas:

Aquí hay información para que comiences a hacerte r propia plantilla personalizada:

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

---

creación de su propio objeto Polygon "Dragable":

Una vez que llegue hasta que usted querrá añadir sus propios polígonos a la plantilla personalizada en lugar de usando GPolygons. Pasé por el doloroso proceso de aprender SVG/VML y escribir una biblioteca para unir SVG/VML. Podría hacerlo, pero recomendaría comenzar intentando usar otra biblioteca como Raphaël.

http://raphaeljs.com/

Usando Raphaël le ahorrará un montón de tiempo tratando de encontrar la manera de llegar gráfico vectorial funcionalidad multi-navegador (Polígono) - y lo mejor de todo es que es compatible con los eventos de arrastre ya, aquí es un ejemplo de su biblioteca:

http://raphaeljs.com/graffle.html

una vez que tenga una plantilla personalizada y que son capaces de lanzar algunos objetos Raphaël en él el último paso consiste en traducir las coordenadas que desee desde un valor LAT/LNG a un valor de píxel . Este servicio está disponible en el MapCanvasProjection de V3:

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

Puede utilizar fromLatLngToDivPixel de averiguar cuáles son los valores de píxeles reales son para los puntos en su polígono Raphael, dibujar, y luego añadirlo a la superposición con una arrastrar evento.

Answer 2

Podría tener marcadores para cada punto en el polígono, estos marcadores podrían tener arrastre y al final de cada arrastre, el polígono podría volver a dibujarse.

También podría tener un marcador en el centro del polígono que representa el polígono como un todo, cuando mueva ese marcador, cada marcador podría moverse en la misma cantidad para mantener la forma.

Answer 3

Bien, entonces, después de ver el sitio web que intentas implementar, comencé a sentir que Rafael no era necesario porque es una biblioteca JS bastante pesada, y si solo tratas de dibujar un polígono rectangular, pensé, ¿por qué? no solo hacerlo con un solo DIV ligero en su lugar?

Sin embargo, creo que la solución de Raphael todavía podría contener agua para muchos otros casos, así que creo que simplemente publicaré otra posible respuesta.

Aquí es un ejemplo de trabajo me tiró juntos:

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

dude en echar un vistazo a la fuente:

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

Esencialmente hacemos lo siguiente

1. Crear la superposición personalizada
2. Crear el div que pueden arrastrarse polígono y, usando jQuery UI, hacer que se pueda arrastrar
3. Tie un evento que escucha cuando el arrastre ha dejado que actualiza la posición LatLng del rectángulo
4. Añadir el objeto a la superposición personalizada
5. implementar la función de drenaje para volver a dibujar el rectángulo durante zooms y sartenes

Actualmente sólo estoy almacenando un valor LatLng para el rectángulo (siendo la esquina superior izquierda) - que fácilmente podría extender este ejemplo para almacenar los 4 puntos del rectángulo y tener la forma dynamica lly cambiar el tamaño de sí mismo en los zooms. Es posible que desee hacer eso, de lo contrario, a medida que los usuarios se alejen, obtendrán un informe del clima para un área cada vez más grande.

Answer 4

Así es como lo hago. Encuentre el centro aproximado del polígono y agregue un marcador, luego agregue un detector de arrastre al marcador. En el cambio lat/lng, reste la diferencia del marcador original lat/lng, reste la diferencia a cada una de las rutas, luego, establezca la posición original en la nueva posición. Asegúrese de que en su llamada a la API Javascript que tiene la biblioteca = geometría, dibujo

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 tienes alguna pregunta, no dude en ponerse en contacto conmigo.

Answer 5

Desde la versión 3.11 (con fecha del 22 de enero de 2013) es posible simplemente establecer la propiedad draggable en la instancia google.maps.Polygon; ver this example.

Si desea mover un polígono mediante programación, necesitará a custom Google Maps Extension which I wrote, ya que la API no proporciona dicho método.