Изменение значения зума при клике на точку. Имитация клика на точку. 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 комментариев

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

dimik

28 января 2016, 00:14

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

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

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

gother72

28 января 2016, 00:14

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

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

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

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

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

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

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

dimik

28 января 2016, 00:14

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

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

gother72

28 января 2016, 00:14

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

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">

dimik

28 января 2016, 00:14

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-й параметр в конструкторе метки

gother72

28 января 2016, 00:14

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

gother72

28 января 2016, 00:14

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

dimik

28 января 2016, 00:14

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

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

gother72

28 января 2016, 00:14

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

Вариант 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();
});
});

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

dimik

28 января 2016, 00:14

попробуйте

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

e.preventDefault();

...

gother72

28 января 2016, 00:14

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

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

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

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

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

dimik

28 января 2016, 00:14

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

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