Карты Google сохраняют перетаскиваемые направления

Question

Вы можете создать маркеры в моем веб-приложении и создать маршрут с указаниями Google с этими маркерами. Но я хочу, чтобы пользователь мог также изменить маршрут, и я нашел перетаскиваемые направления в API карт Google v3. Есть ли способ сохранить измененные направления в базе данных, чтобы вы могли снова создать точный маршрут с этой информацией?

Answer 1

Я собираюсь предположить, что все верно:

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);
});

По сути, это просто предполагает, что начальная и конечная точки уже выбраны, а маршрут по умолчанию уже нарисован.,( ПРИМЕЧАНИЕ: DirectionsRenderer был инициализирован с draggable: true.)

Когда пользователь изменяет маршрут, приложение запускает событие directions_changed.Мы можем отследить это следующим образом:

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

Что-то еще также происходит при изменении маршрута: создается новый waypoint.Вот как мы получаем на всех путевых точках:

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

Переменная waypoints - это массив объектов, описывающих остановки, которые делает маршрут на пути к месту назначения.(Обратите внимание, что были сделаны дополнительные предположения: вы используете route[0], legs[0] и т. Д.)

Каждый объект waypoint имеет свойство location, которое содержит широту и долготу (доступнов location.wa и location.ya соответственно по некоторым причинам).Таким образом, мы можем сообщать приложению, что каждый раз, когда пользователь меняет маршрут, вращать (и сохранять) все латы и долготы текущих путевых точек.Если у вас есть такие файлы, вы можете решить, как их сохранить (AJAX на серверной странице, где они хранятся в базе данных, localStorage и т. Д.)

Затем!

При следующей загрузке этой страницы вы можете получить эти путевые точки из хранилища и инициализировать маршрут следующим образом:

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);
});

Это должно поддерживать новый маршрут, выбранный пользователем.Последнее замечание: я оставил много из этого ответа, например, как они сохраняют его, как вы узнаете, какой пользователь хочет, какой маршрут и т. Д. Но основа есть.Godspeed.

Answer 2

Это может быть что-то, что изменилось между ответом sdleihssirhc и сейчас, но я попробовал вышеупомянутое решение, и оно продолжало терпеть неудачу на displayer.directions.route [0] говоря, что это не определено.

Похоже, атрибут был изменен на routes, и мне потребовалось некоторое время, чтобы выяснить. Использование строки ниже работает для меня:

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

Надеюсь, это сэкономит время и разочарование для всех, кто пытается заставить это работать.