@doctorcat

Как сделать чтобы при выборе li элемента менялись координаты на яндекс карте?

Приветствую коллеги! Суть вопроса, есть выпадающий список ul li в котором можно выбрать несколько городов , нужно чтобы координаты метки на яндекс карте автоматически менялись при выборе города из списка. Прошу помощи желательно с конкретным примером. Заранее благодарен :)

UPD: к сожалению не города, не правильно выразился. Имеются офисы компании в разных городах. И при выборе допустим города москва из выпадающего списка, на сайте меняется номер телефона, емайл, адрес. Но так как там содержится ещё и схема проезда логично менять и карту. Тоесть по сути мне нужно послать какой-то сигнал яндекс карте чтобы она изменила точку фокусировки на другие координаты.
  • Вопрос задан
  • 963 просмотра
Решения вопроса 1
@doctorcat Автор вопроса
Спасибо, сделал. Мне требовалось вот это.

<ul class="city-box">
								<li class="city-inside-box">Ваш город <span class="city-style">Новосибирск</span><i class="fa fa-sort-desc" aria-hidden="true"></i></li>
								<ul class="cities_list">
			  						<li alt="ул. Б. Богаткова, д.24/1" phone="8 (383) 201-85-75" email="info@sib-nsk.net" id="novosibirsk">Новосибирск</li>
			  						<li alt="ул. Крылова, 47а оф. 607" phone="8 (3902) 34-76-90" email="abakan@sib-nsk.net" id="abakan">Абакан</li>
			  						<li alt="ул. Лапина, д. 8, оф. 15" phone="8 (3952) 64-01-63" email="irkutsk@sib-nsk.net" id="irkutsk">Иркутск</li>
			  						<li alt="ул. Тигровая, д. 29, оф. 11 " phone="8 (4232) 50-26-42" email="prim@sib-nsk.net" id="vladivostok">Владивосток</li>

			  					</ul>

								<li class="phone-box"><i class="fa fa-mobile" aria-hidden="true"></i><span>	8 (383) 201-85-75</span></li>
								<li class="mail-box"><i class="fa fa-envelope" aria-hidden="true"></i><span>info@sib-nsk.net</span></li>
								<li class="marker-box"><i class="fa fa-map-marker" aria-hidden="true"></i><a href="#maps"><span>ул. Б. Богаткова, д.24/1</span></a></li>

							</ul>

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.010906, 82.944415],
            zoom: 14
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'Ул.Бориса Богаткова 24/1'
        });
        document.getElementById('irkutsk').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([52.279611, 104.285547], 15, {
        		searchControlProvider: 'yandex#search'
	        });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Лапина, д. 8, оф. 15'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
	    };
	    document.getElementById('abakan').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([53.733745, 91.437465], 15, {
        		searchControlProvider: 'yandex#search'
	        });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Крылова, д. 47а, оф. 607'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
	    };
	    document.getElementById('vladivostok').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([43.116687, 131.878954], 15, {
        		searchControlProvider: 'yandex#search'
	        });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Тигровая, д. 29, оф. 11'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
	    };
	    document.getElementById('novosibirsk').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([55.010906, 82.944415], 14, {
        		searchControlProvider: 'yandex#search'
	        });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'Ул.Бориса Богаткова 24/1'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
	    };
    myMap.geoObjects.add(myPlacemark);
    myPlacemark.balloon.open();
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@MGames
Frontend developer
Если выбирать предполагается именно города, то можно воспользоваться методом geocode. Он возвращает промис, при резолве которого можно задать координаты центра карты, взятые из полученного геообъекта.
Я вообще правильно понял вопрос?)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы