Moving Marker on a PolyLine using Google Maps API v3

Введение

В данной статье мы рассмотрим, как анимировать маркер на полилинии Google Maps API v3 для получения плавного движения маркера без мерцания или задержек. Мы также покажем пример кода и дадим практические советы по оптимизации процесса.

Проблема и Исходный Код

Автор вопроса на StackOverflow столкнулся с проблемой плавного перемещения маркера по полилинии. Изначальный код анимирует маркер между двумя фиксированными точками, но не работает корректно при использовании большего количества точек. Вот исходный код:

var map;
var path;
var marker;
function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    route = new google.maps.Polyline({
        path: [new google.maps.LatLng(30, -110), new google.maps.LatLng(30, -100)],
        map: map
    });
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(30, -110),
        map: map
    });
    counter = 0;
    interval = window.setInterval(function () {
        counter++;
        var pos = new google.maps.LatLng(30, -110 + counter / 100);
        marker.setPosition(pos);
        if (counter >= 1000) {
            window.clearInterval(interval);
        }
    }, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);

Анализ Исходного Кода

Код создает карту, полилинию и маркер, затем анимирует маркер от первой до второй точки в полилинии. Однако, при увеличении количества точек или сложности маршрута, метод становится некорректным и может вызывать мерцание маркера.

Решение Проблемы

Для достижения плавного движения маркера по полилинии можно использовать интерполяцию между точками маршрута. В этом случае маркер будет перемещаться между всеми точками маршрута, обеспечивая плавное движение без мерцания.

Исправленный Код

Вот исправленный код, который анимирует маркер по полилинии без мерцания:

var map;
var path;
var marker;
var polyline;
var step = 0;
var totalSteps;

function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    // Полилиния
    path = [
        new google.maps.LatLng(30, -110),
        new google.maps.LatLng(30, -105),
        new google.maps.LatLng(30, -100)
    ];
    polyline = new google.maps.Polyline({
        path: path,
        map: map
    });

    // Маркер
    marker = new google.maps.Marker({
        position: path[0],
        map: map
    });

    // Анимация маркера
    totalSteps = path.length - 1;
    animateMarker();
}

function animateMarker() {
    if (step < totalSteps) {
        step++;
        var newPos = google.maps.geometry.spherical.interpolate(
            path[step - 1], 
            path[step], 
            step / totalSteps
        );
        marker.setPosition(newPos);
        setTimeout(animateMarker, 20); // Интервал 20ms для плавного движения
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

Объяснение Кода

1. Инициализация карты: Создаем карту и полилинию.
2. Анимация маркера: Используем google.maps.geometry.spherical.interpolate для интерполяции между точками маршрута.
3. Плавное перемещение: Устанавливаем интервал 20 мс для плавного перемещения маркера.

Практические Советы

• Использование интерполяции: Для плавного перемещения маркера используйте функцию google.maps.geometry.spherical.interpolate.
• Интервалы: Оптимизируйте интервалы для плавного движения маркера, избегайте слишком коротких интервалов, чтобы избежать мерцания.
• Проверка производительности: При работе с большим количеством точек проверяйте производительность и учитывайте возможные задержки.

Заключение

Использование интерполяции для анимации маркера на полилинии позволяет достичь плавного движения без мерцания или задержек. Надеемся, что данный материал поможет вам разобраться в проблеме и решить её эффективно.

SEO

---