Вопрос - Как сделать движение карты?

Пост в архиве.

blaga-pro

17 декабря 2010, 08:44

Всем доброго времени суток.

Нужно организовать атоматическое движение карты.

Т.е. есть первая координата по которой показывается карта изначально. Затем нужно нажать на какую нибудь кнопку или ссылку и карта с заданной скоростью начнет двигаться к следующей координате (как будто человек тянет карту мышкой)

Сейчас я сделал так что бы карта показывалась фоном сайта и все управляющие элементы выше слоя с картой. Осталось только как то заставить ее двигаться...

Заранее спасибо за подсказки.

7 комментариев

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

thekashey

28 января 2016, 06:41

есть две команды которые умеют двигать карту
первая это panTo, которая медленно подводит карту куда надо, вторая moveBy, которая сдвигает карту( опять же умеет плавно ) на указанный shift в пикселях.

Также не стоит забывать что если новый центр находиться далеко( нужно\можно ) сделать "прыжок"

blaga-pro

28 января 2016, 06:41

большое спасибо, почти разобрался остался вот только такой вопрос при использовании команды panTo она двигается слишком быстро. можно ли как то назначить скорость? а то так быстро переходит что даже не успеваешь маршрут проглядеть.

вариант с moveBy тоже не плох но там сложнее просчитывать пиксели для перехода в нужное мне место.

blaga-pro

28 января 2016, 06:41

спасибо, не надо разобрался.
добавил в опции speed: 1 и все заработало.
Хотя в документации такого нет...

blaga-pro

28 января 2016, 06:41

в общем еще появился вопрос. Есть такой код

// Создание обработчика для события window.onLoad
   YMaps.jQuery(function () {
   // Создание экземпляра карты и его привязка к созданному контейнеру
   var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
   // Установка для карты ее центра и масштаба
   map.setCenter(new YMaps.GeoPoint(104.308785,52.273919), 15, YMaps.MapType.SATELLITE);
   // Добавление слоя на карту
   map.addLayer(new StaticLayer(10));

//map.panTo(new YMaps.ICoordPoint(104.314922,52.27792));
map.panTo(new YMaps.GeoPoint(104.314837,52.277947), {
flying: 0,
speed: 1,
callback: function (state) {
   if (state == YMaps.State.SUCCESS) {
   map.openBalloon(map.getCenter(), 'Дом димы!!');

map.panTo(new YMaps.GeoPoint(104.325737,52.276578), {
flying: 0,
speed: 1,
callback: function (state) {
   if (state == YMaps.State.SUCCESS) {
   map.openBalloon(map.getCenter(), 'дом макса!!');
   }
   }});

   }
   }});

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

Вопрос в следующем как при достижении первой координаты остановить движение карты до тех пор пока не будет закрыт балун либо нажата какая нибудь кнопка или ссылка?
т.е. нужно остановливать движение каждый раз когда карта доходит до нужной точки и появляется балун и продолжать движение когда балун закрывают или нажимают какуюнибудь кнопку (типа закрыть или далее)

thekashey

28 января 2016, 06:41

создать две различные функции - идемДоДимы и идемДоМакс.
Первую вызвать после иницилизации и в ней на событие закрытия балуна запустить вторую

blaga-pro

28 января 2016, 06:41

нашел вроде событие
CloseButtonClick
но так и не понял как на него вызов функции повесить...

код стал таким...

// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(104.308785,52.273919), 15, YMaps.MapType.SATELLITE);
// Добавление слоя на карту
map.addLayer(new StaticLayer(32));

function idemAndrey(){
map.panTo(new YMaps.GeoPoint(104.304172,52.271411), {
flying: 0,
speed: 1,
callback: function (state) {
if (state == YMaps.State.SUCCESS) {
map.openBalloon(map.getCenter(), 'Дом Андрея' );

}
}});
}

function idemRoma(){
map.panTo(new YMaps.GeoPoint(104.30782,52.275887), {
flying: 0,
speed: 1,
callback: function (state) {
if (state == YMaps.State.SUCCESS) {
map.openBalloon(map.getCenter(), 'Дом Ромы');
}
}});
}

function idemDima(){
map.panTo(new YMaps.GeoPoint(104.314901,52.277966), {
flying: 0,
speed: 1,
callback: function (state) {
if (state == YMaps.State.SUCCESS) {
map.openBalloon(map.getCenter(), 'Дом Димы');
}
}});
}

idemAndrey();

})

blaga-pro

28 января 2016, 06:41

вроде разобрался. нашел пример оттуда выдернул вот такая теперь реализация.

function idemAndrey(){
map.panTo(new YMaps.GeoPoint(104.304172,52.271411), {
flying: 0,
speed: 1,
callback: function (state) {
if (state == YMaps.State.SUCCESS) {
map.openBalloon(map.getCenter(), 'Дом Андрея' );
// Создание обработчика
var balloon = map.getBalloon();
YMaps.Events.observe(balloon, balloon.Events.CloseButtonClick, function () {
idemRoma();
});

}
}});
}