Клуб API Карт

Анимированный оверлей

rodlex
22 декабря 2010, 12:39

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

Использовать ее совсем просто:

// Создаем машинку и добавляем ее на карту
var car = new ymlib.animate.Car();
map.addOverlay(car);

// Запуск анимации
car.moveTo([new YMaps.GeoPoint(37.594646, 55.735397), new YMaps.GeoPoint(37.610997,55.730094)], function () {
    alert("Приехали!");
});

Посмотреть пример использования

Для использования необходимо подключить один файлик
<script src="http://ymlib.narod.ru/1.1/ymlib.js" type="text/javascript"></script>
Также вы можете посмотреть исходные коды на github, они же являются и документацией)
7 комментариев
Подписаться на комментарии к посту
эгей! круто! здорово! :) необычно :))
Мачтаков Антон
8 августа 2011, 21:50

А как сделать такое, если вместо маршрутизатора обычный gpx трек?

Так же, только, возможно, запускать машинку по-очереди для каждого trkseg (смотря какой фильтр стоит)

Мачтаков Антон
8 августа 2011, 22:35

Я в этом не особо. Только разбираюсь.

Вот так вот добавлен трек. И что дальше? желательно на примере.

var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
    var routes = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
    map.addOverlay(routes);

Массив routes в Вашем случае - это массив ломаных.

Т.е., для простоты: в примере исользования заменить слово router на routes (объеденив Ваш код и код примера) и все будет работать.

Мачтаков Антон
8 августа 2011, 23:38

var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
    var routes = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
    map.addOverlay(routes);

});


            // После загрузки маршрута начинается самое интересное
            YMaps.Events.observe(routes, routes.Events.Success, function (routes) {

                // Собираем все точки в будущий маршрут
                var points = [];
                for (var i = 0, route, l = routes.getNumRoutes(); i < l; i++) {
                    route = routes.getRoute(i);
                    points = YMaps.jQuery.merge(points, route.getPoints());
                    map.addOverlay(route);
                }

                // Создаем машинку
                var obj = new ymlib.animate.Car();
                map.addOverlay(obj);

                // Запуск анимации
                obj.moveTo(points, function () {
                    alert("Приехали!");
                });

                // Центрируем карту
                map.setBounds(new YMaps.GeoCollectionBounds(points));
            });

 

Вот сделал так, но ничего не работает!

Просмотрите points на предмет корректной структуры. Попробуйте запустить машинку на однои сегменте.