Google maps para guardar direcciones arrastrables

Question

Puede crear marcadores en mi aplicación web y crear una ruta con direcciones de google con esos marcadores. Pero también quiero que el usuario pueda cambiar la ruta y encontré direcciones arrastrables en la api v3 de google maps. ¿Hay alguna manera de guardar las direcciones modificadas en la base de datos para que pueda crear la ruta exacta otra vez con esa información?

Answer 1

Voy a asumir que la siguiente es cierto:

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 8, 
     center: new google.maps.LatLng(/* center of map */), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }), 
    directions = new google.maps.DirectionsService(), 
    displayer = new google.maps.DirectionsRenderer({ 
     draggable: true 
    }); 

displayer.setMap(map); 
directions.route({ 
    origin: new google.maps.LatLng(/* start point */), 
    destination: new google.maps.LatLng(/* end point */), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}, function (result) { 
    displayer.setDirections(result); 
}); 

Básicamente, esto sólo supone que los puntos extremos de inicio y ya se han elegido y la ruta por defecto ya se ha dibujado. (NOTA: ElDirectionsRenderer se ha inicializado con draggable: true.)

Cuando el usuario cambia la ruta, la aplicación activa un evento directions_changed. Podemos realizar un seguimiento de que de este modo:

google.maps.event.addListener(displayer, 'directions_changed', some_method); 

Algo más también sucede cuando el cambio de la ruta: se crea una nueva waypoint. He aquí cómo nos dan en todos los puntos de interés:

var some_method = function() { 
    var waypoints = displayer.directions.route[0].legs[0].via_waypoint; 
}; 

La variable waypoints es una matriz de objetos que describen las paradas de la ruta hace en su camino hacia el destino. (Tenga en cuenta que más se han formulado hipótesis: que está utilizando route[0], legs[0], etc.)

Cada objeto tiene una propiedad waypointlocation, que contiene la latitud y longitud (disponible en location.wa y location.ya respectivamente, por alguna razón) . Entonces, podemos decirle a la aplicación, cada vez que el usuario cambia la ruta, que gire (y almacene) todos los lats y longs de los waypoints actuales. Una vez que los tenga, puede decidir cómo desea almacenarlos (AJAX en una página del lado del servidor que los almacena en una base de datos, localStorage, etc.)

¡Entonces!

La próxima vez que cargue esta página, se puede agarrar los waypoints de la memoria e inicializar la ruta de este modo:

directions.route({ 
    origin: new google.maps.LatLng(/* start point */), 
    destination: new google.maps.LatLng(/* end point */), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING, 
    waypoints: [ 
     { location: new google.maps.LatLng(/* lat/lng go here */) } // repeat this as necessary 
    ] 
}, function (result) { 
    displayer.setDirections(result); 
}); 

Esto debe mantener la nueva ruta que el usuario escogió. Una nota final: dejé mucho de esta respuesta, como cómo lo guardan, cómo sabes qué usuario quiere qué ruta, etc. Pero la base está ahí. Buena suerte.

Answer 2

Esto podría ser algo que cambió entre la respuesta de sdleihssirhc y ahora, pero probé la solución anterior y siguió fallando en displayer.directions.route [0] diciendo que no estaba definido.

Parece que el atributo se cambió a routes, lo que me llevó un tiempo darme cuenta. El uso de la línea de abajo funciona para mí:

var waypoints = displayer.directions.routes[0].legs[0].via_waypoint; 

Esperemos que ahorrará tiempo y frustración para cualquiera que trate de conseguir que esto funcione.