Определение координат по адресу

Одной из основных задач администратора сайта большой компании является редактирование адресов и определение координат филиалов для размещения меток на карте.

Определение координат по адресу с помощью API Яндекс.Карт 2.1

Вообще говоря, если определение координат необходимо выполнить единожды, либо очень редко, то можно воспользоваться готовым инструментом от Яндекс. Но бывают случаи, когда данный вариант не подходит. Например, в нашей компании более 700 филиалов по всей России. Соответственно, довольно часто возникает необходимость изменения адреса одного из них. Каждый раз открывать инструмент Яндекса, вводить адрес, копировать координаты, а потом вставлять их в свою базу становится довольно утомительно. Для автоматизации я разработал скрипт, который по нажатию одной кнопки сразу записывает координаты в нужное мне поле.

Готовый пример

Координаты

Это пример готового инструмента. Попробуйте ввести свой адрес или передвинуть метку. Вы увидите, как в поле «Координаты» изменятся координаты метки.

Инициализация и начальное положение метки

Для начала необходимо подключить api самих карт.

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Далее определяем начальное положение метки:

start — начальные координаты (55.751428,37.618876 — это координаты Кремля в Москве. Можете указать свои по умолчанию.)

zoom — коэффициент масштабирования карты

id — идентификатор контейнера, где будет располагаться карта

Карта инициализируется при помощи метода ymaps.Map. В параметре controls можно указать какие элементы управления картой будут доступны пользователю. В данном случае я указал только zoomControl — управление масштабом.

function init () {

	start = '55.751428,37.618876'; // start coordinates
	zoom = 10;                      // start zoom
	id = 'map';

	start = start.split(',');       // split coordinates to array

	lat = start[0];
	long = start[1];
	coords = [lat, long];
	Map = new ymaps.Map(id, {    // initialize map
		center: coords,
		zoom: zoom,
		controls: ['zoomControl']
	});
}
ymaps.ready(init);

Теперь можно расположить в вашем html документе элемент с id = map (необходимо указать ширину и высоту блока, в котором будет карта):

<div id="map" style="width: 500px; height: 370px;"></div>

Если все сделано правильно, должна отобразиться карта. Обратите внимание, что ни метки, ни поиска на карте пока нет. Добавим их на следующем шаге.

Добавление поиска и метки

Теперь мы можем добавить на нашу карту поиск и отобразить метку, являющуюся центром карты.

В свойстве метки preset можно указать один из стандартных видов метки. Полный список доступен по ссылке: https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/reference/option.presetStorage-docpage/.

Свойство draggable отвечает за то, что метку можно будет передвигать.

/* Adding search on map */
    var search = new ymaps.control.SearchControl({
        options: {
            float: 'left',
            floatIndex: 100,
            noPlacemark: true
        }
    });
    Map.controls.add(search);

    /* Adding mark on map*/
    mark = new ymaps.Placemark([lat, long],{}, {preset: "islands#redIcon", draggable: true});
    Map.geoObjects.add(mark);

Добавление поиска и метки

Теперь на нашей карте появились поиск и метка, расположенная в центре карты, которую можно перетаскивать.

Отслеживание событий и запись в форму

Теперь надо определиться, какие события должны записывать новые координаты. Очевидно, это поиск по адресу, нажатие на карту и передвижение метки.

Опишем эти события. Обратите внимание на функцию save(). Эта функция позволяет записать данные в объект с id = coordinates. Она не входит в функцию init, а записывается отдельно.

Предупреждение Не забудьте создать данный элемент в своем коде. Например,

< input id="coordinates" >

/* Event drag mark */
mark.events.add("dragend", function () {
	coords = this.geometry.getCoordinates();
	save();
}, mark);

/* Event click */
Map.events.add('click', function (e) {
	coords = e.get('coords');
	save();
});


/* Event search */
search.events.add("resultselect", function () {
	coords = search.getResultsArray()[0].geometry.getCoordinates();
	save();
});

Отслеживание событий изменения метки

function save (){
	var new_coords = [coords[0].toFixed(6), coords[1].toFixed(6)];
	mark.getOverlaySync().getData().geometry.setCoordinates(new_coords);
	document.getElementById("coordinates").value = new_coords;
}

Запись координат в форму

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

Опубликовано Антон Миронов в 25.01.2018