Анимируйте маршрут с отображением как карт Google, так и улиц Google. - PullRequest
2 голосов
/ 10 января 2012

Я работаю над веб-приложением для отслеживания маршрута и подумал, что было бы здорово анимировать маршрут, а не просто показывать его на карте.

Я думаю, что это довольно круто: http://tripgeo.com/DirectionsMapExamples.aspx?id=2

Я хотел бы реализовать это для моих маршрутов, но: для того, что я понимаю (поскольку я продолжал читать код), у них есть только начальный / конечный адрес, остальное генерируется.Когда я получил полный маршрут, у меня это не сработает.

То, что мне нужно реализовать, - это сценарий, который проверяет API просмотра улиц для каждой точки маршрута для панорамы и, если доступно, отображает его, иначе переходите к следующей.

Это превосходит мои знания о взаимодействии с картами / просмотром улиц, и я хотел бы услышать о ком-либо, кто уже делал подобные вещи, и, если возможно, дать мне несколько советов:)

Ответы [ 2 ]

0 голосов
/ 01 марта 2013

Пока у вас есть только несколько точек, которые вам нужно посетить (до 8, если бизнес-клиент не достигнет 23), вы можете указать точки, через которые будет проходить маршрут.сделать это программно.

Проверьте эту статью для получения дополнительной информации.Больше информации о путевых точках здесь в спецификации.

0 голосов
/ 10 января 2012

Я делаю что-то очень похожее, и это моя идея. После того, как вы показали маршрут, вы знаете информацию, хранящуюся в «конечных точках» или «путевых точках» (в зависимости от того, как вы хотите ее обозначить). Затем перезагружайте div, используя setTimeout или setInterval для каждой секунды, и при каждой перезагрузке обновляйте положение вашего значка до этой начальной точки в ноге.

Вот метод requestHandler

var i = 0;
function requestHandler(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result); //Your directionsDisplay object
        var myRoute = result.routes[0].legs[0];
        if(i < myRoute.steps.length; i++) {
           //Write the code to include the icon using google.maps API
        }
    }
setTimeout(requestHandler,1000);
}

Я знаю, что это может быть не идеальное решение, но вам просто нужно повозиться с ним. Я играю с ним, чтобы найти идеальное решение.

...