Доброго времени суток. Хотелось бы реализовать анимацию метки. То есть чтобы метка постепенно перемещалась из точки А в точку Б (просто по прямой линии)
Делаю так (весь листинг приводить не буду, только самое необходимое):
// Функция расчета расстояния от одной точки до другой function calcDis(point1, point2) { return Math.sqrt((point2.x-point1.x)*(point2.x-point1.x) + (point2.y-point1.y)*(point2.y-point1.y)); } // Функция расчета приращения по x function calcDx(dis, point1, point2){ return ((point2.x-point1.x)/(dis-1)); } // Функция расчета приращения по y function calcDy(dis, point1, point2){ return ((point2.y-point1.y)/(dis-1)); } // Точка a и точка b var a = new YMaps.GeoPoint(104.15734, 52.34662); var b = new YMaps.GeoPoint(104.262344, 52.262659); // конвертируем координаты точки в пиксельные var convert_a = map.converter.coordinatesToMapPixels(a); var convert_b = map.converter.coordinatesToMapPixels(b); // функция createIcon создает метку в указанных координатах var icon1 = createIcon(a); // добавляем на карту map.addOverlay(icon1); // рассчитываем расстояние м/у точками и приращения var dis = calcDis(convert_a, convert_b); var dx = calcDx(dis, convert_a, convert_b); var dy = calcDy(dis, convert_a, convert_b); // это таймер на основе одного из плагинов для jQuery $("#YMapsID").everyTime(200,'timer1', function() { // прибавляем к точке приращения по x и y convert_a.x += dx; convert_a.y += dy; // устанавливаем новые координаты для метки предварительно // конвертировав их icon1.setCoordPoint(map.converter.clientPixelsToCo ordinates(convert_a)); });
Этот код работает, но есть одна проблема: при скролинге страницы метка тоже перемещается вверх или вниз. Думаю это связанно с неправильным выбором метода преобразования координат. (При увеличении масштаба и перемещении карты тоже что-то подобное происходит)
Вообщем прощу подсказать какой метод преобразования здесь наиболее правильно применить. И вообще в правильном ли направлении z движусь? Не изобретаю ли я велосипед таким способом? Может быть в API уже есть функции для подобных вещей. Или есть уже подобная реализация (пример)?