Animating geoObject example via ymaps 2.0
ymaps, route, geoObject animate
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&mode=release&lang=ru-RU" type="text/javascript"></script>
<div id="map"></div>
CSS
html, body, #map { width: 100%; height: 100%; }
body { margin: 0; padding: 0; }
.b-car { width: 54px; height: 54px; margin-left:-27px; margin-top:-27px; }
.b-car.b-car_blue { background: url(http://ymlib.narod.ru/1.1/src/i/cars-blue.png) no-repeat 0 0 #3300FF; }
.b-car.b-car-direction-e {background-position:-324px 0}
.b-car.b-car-direction-ne {background-position:-378px 0}
.b-car.b-car-direction-n {background-position:0 0}
.b-car.b-car-direction-nw {background-position:-54px 0}
.b-car.b-car-direction-w {background-position:-108px 0}
.b-car.b-car-direction-sw {background-position:-162px 0}
.b-car.b-car-direction-s {background-position:-216px 0}
.b-car.b-car-direction-se {background-position:-270px 0}
JavaScript
// по мотивам http://ymlib.narod.ru/1.1/demos/animate.html
// Описываем класс машинки
(function(){
"use strict";
// делаем заготовку для кол-ва направлений. 4, 8 или 16 (+, x, *)
var directionsVariants = {
classes: {
16: ['w', 'sww', 'sw', 'ssw', 's', 'sse', 'se', 'see', 'e', 'nee', 'ne', 'nne', 'n', 'nnw', 'nw', 'nww'],
8: ['w', 'sw', 's', 'se', 'e', 'ne', 'n', 'nw'],
4: ['w', 's', 'e', 'n']
},
n: function (x,y,n) {
n = n || 8;
var n2 = n>>1; // half of n
var number = (Math.floor(Math.atan2(x,y)/Math.PI*n2+1/n)+n2) % n; // seems like there is a little bug here
return {n: number, t: directionsVariants.classes[n][ number ]};
},
16: function (x,y) { // -> values in range [0, 16]
return directionsVariants.n(x,y,16);
},
8: function (x,y) { // -> values in range [0, 8]
return directionsVariants.n(x,y,8);
},
4: function (x,y) { // -> values in range [0, 4]
return directionsVariants.n(x,y,4);
}
};
var
defaultMovingCallback = function (geoObject, coords, direction) { // действие по умолчанию
// перемещаем машинку
geoObject.geometry.setCoordinates(coords);
// ставим машинке правильное направление - в данном случае меняем ей текст
geoObject.properties.set('iconContent', direction.t);
},
defaultCompleteCallback = function (geoObject) { // действие по умолчанию
// приехали
geoObject.properties.set('iconContent', "Приехали!");
};
// нормализуем в один массив точек сегметны из ymaps
var makeWayPointsFromSegments = function (segments, options) {
options = options || {};
options.directions = [4, 8, 16].indexOf(options.directions) >= 0 ? options.directions : 8; // must be 4, 8, or 16
options.speed = options.speed || 6;
...