Клуб API Карт

Плавное перемещение по точкам panTo

Dyadya
27 августа 2014, 12:08

Добрый день, еще не работал с такой функцией panTo, есть карта с точками

myMap = new ymaps.Map(
'map', {
center: [54.193042,37.617757],
zoom: 13,
controls: ['zoomControl', 'typeSelector', 'geolocationControl', 'fullscreenControl']
});

 обьекты на карте 

myGeoObject1 = new ymaps.Placemark([54.186811,37.611010], {

            balloonContentHeader: "Тульский областной суд",

            balloonContentBody: "Телефоны: (8-4872) 36-37-16;<br> канцелярия по уголовным делам 1-й инстанции<br>(8-4872) 31-27-79;<br> канцелярия по уголовным делам 2-й инстанции<br>(8-4872) 36-29-12;<br> канцелярия по гражданским делам<br>(8-4872) 31-23-11",

            balloonContentFooter: "300600, Тульская область, г.Тула, пр. Ленина, 45",

            hintContent: "Тульский областной суд"

        });

 

myGeoObject2 = new ymaps.Placemark([54.190563,37.584980], {

            balloonContentHeader: "Советский районный суд",

            balloonContentBody: "Телефон: (4872) 34-26-64",

            balloonContentFooter: "300002, Тульская область, г. Тула, ул. Луначарского, д. 76",

            hintContent: "Советский районный суд"

        });

 

myGeoObject3 = new ymaps.Placemark([54.207598,37.606805], {

            balloonContentHeader: "Центральный районный суд",

            balloonContentBody: "Телефон: (4872) 34-26-64",

            balloonContentFooter: "300002, Тульская область, г. Тула, ул. Луначарского, д. 76",

            hintContent: "Центральный районный суд"

        });

добавляю на карту 

    myMap.geoObjects 

.add(myGeoObject1)

.add(myGeoObject2)

.add(myGeoObject3);

У меня есть 3 ссылки

<ul>

<li><a style="cursor: pointer" onclick="setBounds1();">Тульский областной суд</a></li>

<li><a style="cursor: pointer" onclick="setBounds2();">Советский районный суд</a></li>

<li><a style="cursor: pointer" onclick="setBounds3();">Центральный районный суд</a></li>

и написал функцию которая центрует карту на точке и открывает балун

function setBounds1 () { myMap.setCenter([54.186811,37.611010]); myGeoObject1.balloon.open(); }

function setBounds2 () { myMap.setCenter([54.190563,37.584980]); myGeoObject2.balloon.open(); }

function setBounds3 () { myMap.setCenter([54.207598,37.606805]); myGeoObject3.balloon.open(); } 

А теперь вопрос, как мен изменить мою функци чтоб при клике по ссылке было пролавное перемещение по точкам???? зарание благодарен. 

18 комментариев
Всеволод Шмыров
27 августа 2014, 14:53
Добрый день. Не совсем ясна задача. У вас есть три функции, а должна быть одна или для каждой функции разный порядок точек?
У самого panTo простой синтаксис
http://api.yandex.ru/maps/doc/jsapi/2.1-dev/ref/reference/Map.xml#panTo
нужно просто передать массив точек.

у меня всего 3 и более точки на карте, надо чтоб при надатии по сылке было плавное перемещение по ним! чтоб все выглядмло красиво, плавно и эффектно, вот сам сайт где это реализуеться http://agmera.ru/maps/ 

Всеволод Шмыров
27 августа 2014, 15:40
А что у вас не получается? Падает какая-то ошибка в консоль?

даже не знаю пока как и использовать функцию, относительно того кода который есть =(

Всеволод Шмыров
27 августа 2014, 15:50
Ну это вопрос по основам JS. Вы указали вызов функции по событию click ссылки
onclick="setBounds1();"
. Сейчас это считается очень старомодным способом. Нужно просто заменить setCenter на panTo. В panTo первым аргументом передаете массив точек (как показано в примере), опциями duration, delay, flying и safe можно настроить анимацию.

Я только изучаю js и api yandex буду благодарен хотя бы на кусок примера =)

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

 

А то у вас минимум 30 точек на карте и вы для каждого пишете свою функцию

Именнь так, по ссылке можно посмотреть весь код, 30 точек и под каждую своя функция, а вот как в массив все это заипсать пока не догодался, буду благодарен за подсказку и пример кода! 

Не самый лучший вариант, но попробуйте так:

 

Сделайте массив из ваших объектов.

При клике вызывайте функцию, передавая порядковый номер элемента из массива (мамссивы заполняются с 0, это важно).

В функции берите обэект из массива (массив[номер]), у него в свойствах есть уже координаты, писать их повторно руками нет необходимости.

в then у этого же элемента открываете балун.

Так добавление новых точек на карте потребюует лишь добавить новй элемент в массив и указать в ссылке вызов функции с новым номером.


НО, повторюсь, это все-таки не лучший вариант, просто другие сложнее.

Благодарю, а что можите посоветовать из литературы или сайтов для изучения и овоения js?

Я его не выучил( Чужой код для меня, пока, лучший пример.

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

 

С вами польностью соглавен так и сам научился работать с картами yandex и сразу с 2.1 =)

замените сточки myMap.setCenter на
myMap.panTo(center).then(function () {
       myGeoObject_номер_.balloon.open(); //
});

не работает =(

потому что вместо переменной center нужно подставить соответствующие координаты — [54.186811,37.611010], [54.190563,37.584980] и так далее

конечную точку я знаю а вот как определить первоначальное значение которое уставлено в данный момент? у меня порядка 30 точек, да и клиен может сам карту перетащить 

начальное не нужно, нужно именно конечное подставлять туда

Огромное спасибо, теперь понял, все заработало!!!!! УРА ТОВАРИЩИ, БЛАГОДАРЮ ЗА ПОМОЩЬ!!!!!!!