$(document).ready(function(){
var map_id = $('#map');
if (map_id.length) {
/*
*** START
*/
ymaps.ready(init);
var myMap, myRectangle;
function init(){
myMap = new ymaps.Map("map", {
center: [53.128851, 50.107236],
zoom: 17,
controls: [],
});
function clickGoto() {
// город
var city = this.getAttribute('data-goto');
// получение координат по адресу - асинхронная функция
var myGeocoder = ymaps.geocode(city);
myGeocoder.then(
function(res) {
coords = res.geoObjects.get(0).geometry.getCoordinates();
// переходим по координатам
myMap.panTo(coords, {
flying: 1
});
// добавляем маркер
var placeMark = new ymaps.Placemark(coords, {
balloonContent: city
});
myMap.geoObjects.add(placeMark);
placeMark.balloon.open();
},
function(err) {
alert('Ошибка');
}
);
return false;
}
// навешиваем обработчики
var col = document.getElementsByClassName('goto');
for (var i = 0, n = col.length; i < n; ++i) {
col[i].onclick = clickGoto;
}
/*
myMap.balloon.open(myMap.getCenter(), {
contentBody: '<div style="display: inline-block; margin-right: 10px"><img src="#" alt=""></div>' + '<div style="display: inline-block">' + '<p style="margin-bottom: 0">test</p >' + ' <p style="margin-bottom: 0">test</p>' + ' <p style="margin-bottom: 0">test</p></div>'
}, {
closeButton: false,
});
*/
/*
*** Создаем многоугольник, используя вспомогательный класс Polygon.
*/
var myPolygon = new ymaps.Polygon([
[
[53.128822,50.108663],
[53.12979,50.107354],
[53.129016,50.10568],
[53.128261,50.107043]
],
], {
// Описываем свойства геообъекта.
// Содержимое балуна.
hintContent: "Многоугольник"
}, {
// Задаем опции геообъекта.
// Цвет заливки.
fillColor: "#DB7093",
strokeColor: "#990066",
fillOpacity: 0.24565,
strokeOpacity: 0.8,
strokeWidth: 3,
});
// Добавляем объекты на карту.
myMap.geoObjects.add(myPolygon);
}
/*
*** END
*/
};
/*
*** END
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>
<div id="map" style="width:400px; height:300px"></div>
<a href="#" class="goto" data-goto="Россия, Москва, Красная площадь, 1" title="Москва">Россия, Москва, Красная площадь, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Киев, улица Крещатик, 1/2" title="Киев">Украина, Киев, улица Крещатик, 1/2</a><br>
<a href="#" class="goto" data-goto="Россия, Свердловская область, Екатеринбург, проспект Ленина, 1" title="Екатеринбург">Россия, Свердловская область, Екатеринбург, проспект Ленина, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Одесса, Приморский бульвар, 1" title="Одесса">Украина, Одесса, Приморский бульвар, 1</a>
<div id="result"></div>
Использовал пример из этого вопроса в коде для перемещения по карте с помощью ссылок.
Теперь вопрос таков - как можно реализовать переключение балуна и выделения области при переходе по ссылкам, чтобы при переходе к области отображались только ее балун (который, если не ошибаюсь, может быть открыт только в единственном экземпляре) и выделенная область?
И один момент, который не появляется в этом примере - при использовании placeMark.balloon.open(); приходится нажимать на ссылку три раза, чтобы позиция оказалась в центре карты - т.е. сначала происходит просто смещение, затем выдвигается балун, потом уже встает на свое место. Что может влиять на это?