Клуб API Карт

Изменение значения зума при клике на точку. Имитация клика на точку. 2.1

gother72
10 мая 2014, 17:00

прошу помощи в решении вопроса. Буду очень благодарен. 

Есть карта, с прописанными точками.

1. Нужно чтобы при клике на точку карта не только центровалась на ней, но и меняла значение zoom до нужного (не того, которое указано в значении центра карты). Как это можно реализовать?

2. Понимаю, что не очень в тему, но как можно реализовать имитацию нажатия на точку на карте через кнопки, расположенные на этой-же странице, но за пределами карты? В смысле, при нажатии на кнопку (например ссылку) карта это будет воспринимать как нажатие на точку на карте и центровать карту на этой самой точке.

 

Точки на карте прописаны таким вот образом:

myGeoObject = new ymaps.GeoObject({
geometry: {
type: "Point",
},
properties: {
hintContent: 'CompsHelp',


}
});

myMap.geoObjects
.add(myGeoObject)
.add(new ymaps.Placemark([50.488337, 30.498784], {
balloonContentHeader: " Контент ",
balloonContentBody: " Контент ",
balloonContentFooter: " Контент ",
}, {
preset: 'islands#dotIcon',
iconColor: '#3b5998'

}))

myMap.geoObjects.add(myPlacemark);
}

 

 

 Заранее спасибо.

 

12 комментариев
Подписаться на комментарии к посту

При создании и добавлении точек на карту вы можете связать их с нужными дом элементами

У нас есть статья

http://ymapsapi.ya.ru/replies.xml?item_no=926

Спасибо, пример из статьи интегрировать получилось. 

Возникли еще вопросы:

1. Как прописать, чтобы при клике по метке на карте/пункте меню оно центровало ровно по координатам центра итэма и её приближало до нужного значения зума?

Пытался по этому поводу вписать значения зума в нужные по моему мнению места, но не помогло...

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

Чтобы просто вместо балуна брало хедер из названия, понял как. Но добавить доп. поля для боди, например, не получается. Нуб я в программировании :(

 

 

Буду очень благодарен за примеры. Заранее большое спасибо.

 

 

 

 

1. Вроде бы в примере в статье так и делается

2. Пример балуна с заголовком и подвалом есть в песочнице

 

Понимаю, что достал, но криворукость сильна) В основном разобрался, но возникли некоторые моменты. Я прилагаю код и страницу с которой работаю, если реально, очень прошу прямо ткнуть где ошибки.

1. Копировал прямо из примера, но при клике на пункт меню, в отличие от примера, не открывается балун. При клике на метку, всё ок.

2. В примере нету обьяснения как добиться нужной степени приближения при клике на метку. Не могли бы ткнуть куда нужно вписать значение?

3. Понял как в балун толкать всё что угодно, в т.ч. html . Не подскажете куда и как прописать значения размера окна балуна? Напр. 200х300.

Понимаю, что у меня случай запущеный :)

Страница, куда леплю карту: http://evakuatorr-spb.ru/kontakty.html

Код:




http://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">

1. статья для версии 2.0, в версии АПИ 2.1 у метода карты panTo нет опции callback

там нужно через интерфейс Promises балун открывать:

myMap.panTo(placemark.geometry.getCoordinates(), {

    delay: 0

}).then(function () {

    placemark.balloon.open();

});

2. panTo не принимает масштаб, поэтому можно попробовать домаштабировать после окончания перемещения центра

myMap.panTo(placemark.geometry.getCoordinates(), {

    delay: 0

}).then(function () {

    myMap.setZoom(15);

    placemark.balloon.open();

});

 

3. можно попробовать выставить опции для балуна balloonMinHeight, balloonMinWidth в 3-й параметр в конструкторе метки

Большое спасибо. Всё работает.

Последний вопрос)  Всё работает замечательно, но 1 момент есть. Сейчас изменение масштаба происходит только по клику на пункт меню. Можно ли сделать так, чтобы при клике на метку на карте, тоже менялся масштаб?

Можно слушать клики на метке или на коллекции и делать что-то

http://api.yandex.ru/maps/jsbox/2.1/event_rollover

 

Получилось, но не совсем правильно. Два варианта:

 Вариант 1:

placemark.events.add('click', function(e) {

myMap.setZoom(15);

});

Работает, приближает. Не получилось только сделать так, чтобы карта центровалась по точке. Поэтому попробовал вариант 2:

 

placemark.events.add('click', function(e) {
myMap.panTo(placemark.geometry.getCoordinates(), {
}).then(function () {
myMap.setZoom(15);
placemark.balloon.open();
});
});

Этот вариант даже не перемещает карту. В той точке, в которой был меняет масштаб. Но на другом конце карты открывает нужный балун. Подскажите, пожалуйста, как решить проблему.

 

попробуйте

placemark.events.add('click', function(e) {

e.preventDefault();

 ...

Не помогло. +перестало открывать балун. Сделал 

placemark.events.add('click', function(e) {
e.preventDefault();
myMap.setZoom(15);
placemark.balloon.open();
});

и получил тоже что и было: не по самому центру находится.

Страница с картой:

http://apple4you.kiev.ua/contacts.html

 

 

 

 

Я имел ввиду так:

 

placemark.events.add('click', function(e) {
    e.preventDefault();
    myMap.panTo(placemark.geometry.getCoordinates())
    .then(function () {
        myMap.setZoom(15);
        placemark.balloon.open();
    });
});