NeXan87
@NeXan87
Фрилансер

Яндекс Карты API. Как получить данные метки в «input» при клике на карту?

Всем привет! В программировании я не очень, поэтому с трудом пополам написал такой код для создания метки на карте и передачи ее координат, адреса и масштаба в поле "input". И затормозил на нескольких задачах. Поэтому решил обратиться за помощью к гуру. Собственно, код:
ymaps.ready(init);        
function init() {
	var myMap = new ymaps.Map("map", {
		center: [59.93840592010904,30.316897968261596],
		zoom: 12,
		controls: ['zoomControl', 'fullscreenControl', 'geolocationControl',
			new ymaps.control.SearchControl({
				options: {
					size: 'large',
					provider: 'yandex#search'
				}
			})]
	});
	
	/* Начальный адрес метки */
	var address = '59.93840592010904,30.316897968261596';
	
	ymaps.geocode(address).then(function(res) {
		var coord = res.geoObjects.get(0).geometry.getCoordinates();
		
		var myPlacemark = new ymaps.Placemark(coord, null, {
			preset: 'islands#blueDotIcon',
			draggable: true
		});
		
		myMap.events.add('click', function (e) {
			var coords = e.get('coords');
			
			// Если метка уже создана – просто передвигаем ее.
			if (myPlacemark) {
				myPlacemark.geometry.setCoordinates(coords);
			}
			// Если нет – создаем.
			else {
				myPlacemark = createPlacemark(coords);
				myMap.geoObjects.add(myPlacemark);
				// Слушаем событие окончания перетаскивания на метке.
				myPlacemark.events.add('dragend', function () {
					getAddress(myPlacemark.geometry.getCoordinates());
				});
			}
			getAddress(coords);
		});
		
		/* Событие dragend - получение нового адреса */
		myPlacemark.events.add('dragend', function(e){
			var coords = e.get('target').geometry.getCoordinates();
			var new_coords = [coords[0].toFixed(4), coords[1].toFixed(4)];
			$('#bpxl_infocoords').val(new_coords);
			ymaps.geocode(new_coords).then(function(res) {
				var data = res.geoObjects.get(0).properties.getAll();
				$('#bpxl_infoadress').val(data.text);
			});
			var zoom = myMap.getZoom()
		    $('#bpxl_infoscale').val(zoom);
		});
		
		myMap.geoObjects.add(myPlacemark);	
		myMap.setCenter(coord, 12);
	});
	myMap.behaviors.disable('scrollZoom');
	if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
		myMap.behaviors.disable('drag');
	}
}

<!DOCTYPE html>

<head>
    <title>Определение адреса клика на карте с помощью обратного геокодирования</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="event_reverse_geocode.js" type="text/javascript"></script>
    <script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 95%;
            margin: 0;
            padding: 0;
            font-family: Arial;
            font-size: 14px;
        }
        #map {
            width: 100%;
            height: 95%;
        }
        .header {
            padding: 5px;
        }
    </style>
</head>
<body>
<p class="header">Кликните по карте, чтобы узнать адрес</p>
<div id="map"></div>
Адрес: <input type="text" id="bpxl_infoadress">
Координаты: <input type="text" id="bpxl_infocoords">
Масштаб: <input type="text" id="bpxl_infoscale">
</body>
</html>

Проверяю работоспособность этого кода здесь - https://yandex.ru/dev/maps/jsbox/2.1/event_reverse..., заменив родной код, моим.

Собственно, сами, проблемы:
1. При перемещении курсора кликом на карту, адрес и координаты не обновляются.
2. При изменении масштаба, коэффициент масштаба в input не меняется, только после перемещения метки.
3. Как удалить из адреса префикс "Россия, Санкт-Петербург" и оставить только улицу и дом?

Заранее спасибо!
  • Вопрос задан
  • 712 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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