Как в Яндекс картах сделать выбор адреса по клику на кнопку
По клику на любую из кнопок происходит переход на определенную точку на карте, находящейся на той же странице, вывод балуна, и выставление зума.
<style>
.district-button {
display: inline-block;
padding: 2px 5px;
border-radius: 5px;
background: #eee;
cursor: pointer;
color: #222;
}
.district-button:hover {
background: #ddd;
}
.district-button.active {
background: rgb(240, 218, 123);
color: #000;
}
#atelie-address-wr {
display: none;
}
.build-route {
display: inline-block;
border-bottom: 1px dotted #aaa;
font-style: underline;
cursor: pointer;
}
.build-route:hover {
border-color: rgb(240, 218, 123);
color: rgb(240, 218, 123);
}
#Ymap {
width: 100%;
height: 500px;
border-radius: 5px;
background: #ccc;
margin: auto;
overflow: hidden;
}
</style>
<div id="data">
<p>Выберите филиал</p>
<p>
<span class="district-button" id="dis-1">ЮМР</span>
<span class="district-button" id="dis-2">ФМР</span>
<span class="district-button" id="dis-3">ГМР</span>
</p>
<p id="atelie-address-wr">Вам подойдёт ателье по адресу:<span id="atelie-address"></span> → <span class="build-route">Построить маршрут</span></p>
<div id="result" style="display: none"></div>
<form action="" id="route-form">
<p><strong></strong></p>
</form>
</div>
<div id="Ymap"></div>
<script src='https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
// Задаём текстовые адреса ателье
var atelie1Text = ' ул. Монтажников, д. 5';
var atelie2Text = ' ул. Алтайская, д. 2/1';
// Начинаем Яндекс карты
ymaps.ready(init);
// Инициализируем карты
function init(){
var result = document.getElementById('result'),
// Координаты ателье
at1 = [45.060284,38.966594],
at2 = [45.027322,39.041859];
// Задаём соответствие района ателье. Важно чтобы текст совпадал с текстом на кнопке!
destinations = {
'ЮМР': at1,
'ФМР': at1,
'ГМР': at2
}
// Карта как есть изначально
myMap = new ymaps.Map ("Ymap", {
center: destinations['ЮМР'],
zoom: 12
});
// Дальше идёт код, который я позаимствовал из Stack Overflow. Комментарии автора скрипта
// http://ru.stackoverflow.com/questions/229452/Плавное-перемещение-карты-яндекс-по-клику
// Начало заимствованного скрипта
result.textContent = 'map init';
function clickGoto() {
// --- город
var pos = this.textContent;
result.textContent = pos;
// --- переходим по координатам
myMap.setCenter(destinations[pos], 14, {duration: 1000});
return false;
}
// --- навешиваем обработчики
var col = document.getElementsByClassName('district-button');
for (var i = 0, n = col.length; i < n; ++i) {
col[i].onclick = clickGoto;
result.textContent = result.textContent + ' ' + i;
};
// Конец заимствованного скрипта
// Создаём метки для ателье
pointOne = new ymaps.Placemark(at1,{}, {
preset: 'twirl#blackIcon'
});
myMap.geoObjects.add(pointOne);
pointTwo = new ymaps.Placemark(at2,{}, {
preset: 'twirl#blackIcon'
});
myMap.geoObjects.add(pointTwo);
// Конец работы с картой
};
// По клику на любую из кнопок филиала мы делаем видимым сам контейнер для отображения рекомендуемого адреса, получаем ID кнопки и, в зависимости от него, сначала пишем в соответствующий контейнер адрес ателье, затем удаляем активный класс от всех кнопок и добавляем нажатой кнопке.
$('.district-button').click(function() {
$('#atelie-address-wr').show();
var disId = $(this).attr('id');
switch (disId) {
case 'dis-1':
$('#atelie-address').text(atelie1Text);
$('.district-button').removeClass('active');
$('#dis-1').addClass('active');
break;
case 'dis-2':
$('#atelie-address').text(atelie1Text);
$('.district-button').removeClass('active');
$('#dis-2').addClass('active');
break;
case 'dis-3':
$('#atelie-address').text(atelie2Text);
$('.district-button').removeClass('active');
$('#dis-3').addClass('active');
break;
}
});
</script>