Инструмент для определения координат — API Яндекс.Карт 2.х

Автор: | 26.01.2013
18 комментариев

Вам наверно известно, что на сайте API Яндекс.Карт существует инструмент для определения координат.

Но с выходом версии API Яндекс.Карт 2.х использовать его стало не очень удобно, т.к изменился порядок записи координат, полученное значение необходимо предварительно куда-то скопировать и поменять местами значения.

Я решил сделать свой инструмент для определения координат с API Яндекс.Карт 2.х

А за одно рассказать о том как это сделать.

На этом примере мы разберем работу с событиями и передачу значений в форму на карте.

Посмотреть его работу можно здесь.

Инструмент для определения координат — API Яндекс.Карт 2.х

Перейдя по ссылке, мы увидим карту с элементами управления и формой для вывода значений координат метки, масштаба и центра карты.

В центре карты расположена метка, которая показывает необходимое местоположение.

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

Координаты будут показаны в форме на карте в строке «Координаты метки», кроме того там показываются текущий уровень масштаба и координаты центра карты.

Теперь рассмотрим код примера.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Инструмент для определения координат - API Яндекс.Карт 2.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="/examples/add-users-ymapsapi2/css/bootstrap.min.css" rel="stylesheet" />
 
    <style>
      html, body, #YMapsID {
        margin: 0;
        padding: 0;
        height: 100%;
      }
 
	  #coord_form{
		position: absolute;
		z-index: 1000;
		background: none repeat scroll 0% 0% rgb(255, 255, 255);
		list-style: none outside none;
		padding: 10px;
		margin: 0px;
		right: 10px;
		top: 50px;
	  }
    </style>
 
    <script type="text/javascript">
 
	var myMap, myPlacemark, coords;
 
	ymaps.ready(init);
 
        function init () {
 
		//Определяем начальные параметры карты
            myMap = new ymaps.Map('YMapsID', {
                    center: [56.326944, 44.0075], 
                    zoom: 10
                });	
 
			//Определяем элемент управления поиск по карте	
			var SearchControl = new ymaps.control.SearchControl({noPlacemark:true});	
 
			//Добавляем элементы управления на карту
			 myMap.controls
				.add(SearchControl)                
                .add('zoomControl')                
                .add('typeSelector')                 
                .add('mapTools');
 
			coords = [56.326944, 44.0075];
 
			//Определяем метку и добавляем ее на карту				
			myPlacemark = new ymaps.Placemark([56.326944, 44.0075],{}, {preset: "twirl#redIcon", draggable: true});	
 
			myMap.geoObjects.add(myPlacemark);			
 
			//Отслеживаем событие перемещения метки
			myPlacemark.events.add("dragend", function (e) {			
			coords = this.geometry.getCoordinates();
			savecoordinats();
			}, myPlacemark);
 
			//Отслеживаем событие щелчка по карте
			myMap.events.add('click', function (e) {        
            coords = e.get('coordPosition');
			savecoordinats();
			});	
 
	//Отслеживаем событие выбора результата поиска
	SearchControl.events.add("resultselect", function (e) {
		coords = SearchControl.getResultsArray()[0].geometry.getCoordinates();
		savecoordinats();
	});
 
	//Ослеживаем событие изменения области просмотра карты - масштаб и центр карты
	myMap.events.add('boundschange', function (event) {
    if (event.get('newZoom') != event.get('oldZoom')) {		
        savecoordinats();
    }
	  if (event.get('newCenter') != event.get('oldCenter')) {		
        savecoordinats();
    }
 
	});
 
    }
 
	//Функция для передачи полученных значений в форму
	function savecoordinats (){	
		var new_coords = [coords[0].toFixed(4), coords[1].toFixed(4)];	
		myPlacemark.getOverlay().getData().geometry.setCoordinates(new_coords);
		document.getElementById("latlongmet").value = new_coords;
		document.getElementById("mapzoom").value = myMap.getZoom();
		var center = myMap.getCenter();
		var new_center = [center[0].toFixed(4), center[1].toFixed(4)];	
		document.getElementById("latlongcenter").value = new_center;	
	}
 
    </script>
 
</head>
 
<body>
 
<div id="YMapsID"></div>
<div id="coord_form">
<p><label>Координаты метки: </label><input id="latlongmet" class="input-medium" name="icon_text" /><br/>
<label>Масштаб: </label><input id="mapzoom" class="input-medium" name="icon_text" /></p>
<p><label>Центр карты: </label><input id="latlongcenter" class="input-medium" name="icon_text" /></p>
</div>
 
</body>
</html>

В начале мы определяем параметры нашей карты — центр, масштаб и добавляем метку в центр карты.

Далее мы должны отслеживать различные события.

Перемещение метки — dragend:

myPlacemark.events.add("dragend", function (e) {			
	coords = this.geometry.getCoordinates();
	savecoordinats();
}, myPlacemark);

Если оно произошло, мы получаем новые координаты и вызываем функцию savecoordinats.

Код функции savecoordinats:

function savecoordinats (){	
	var new_coords = [coords[0].toFixed(4), coords[1].toFixed(4)];	
	myPlacemark.getOverlay().getData().geometry.setCoordinates(new_coords);
	document.getElementById("latlongmet").value = new_coords;
	document.getElementById("mapzoom").value = myMap.getZoom();
	var center = myMap.getCenter();
	var new_center = [center[0].toFixed(4), center[1].toFixed(4)];	
	document.getElementById("latlongcenter").value = new_center;	
}

В начале мы преобразуем значения координат оставляя только четыре знака после запятой.

Затем передаем новые координаты нашей метке.
Передаем значения координат элементу формы с id= latlongmet, уровень масштаба карты элементу —

id = mapzoom.

Получаем координаты центра карты и после преобразования предаем элементу формы с id = latlongcenter.

Следующее отслеживаемое событие — клик по карте.

За это отвечает код:

myMap.events.add('click', function (e) {        
    coords = e.get('coordPosition');
	savecoordinats();
});

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

SearchControl.events.add("resultselect", function (e) {
		coords = SearchControl.getResultsArray()[0].geometry.getCoordinates();
		savecoordinats();
	});

И последнее событие — это изменения области просмотра карты при изменении масштаба или перемещении карты.

За это отвечает код:

myMap.events.add('boundschange', function (event) {
    if (event.get('newZoom') != event.get('oldZoom')) {		
        savecoordinats();
    }
	  if (event.get('newCenter') != event.get('oldCenter')) {		
        savecoordinats();
    }
 
});

Надеюсь данный инструмент Вам понравиться.

Инструмент для определения координат — API Яндекс.Карт 2.х: 18 комментариев

  2. Сергей

    При нажатии на кнопку «Схема» — выпадающее меню прячется под блоком с координатами

    Ответить ↓
    1. admin Автор записи

      Поправил, сместил форму в левую сторону

      Ответить ↓
  3. Евгений

    Здравствуйте, подскажите, как адаптировать этот код, для вставки в модуль? Спасибо!

    Ответить ↓
    1. admin Автор записи

      В какой модуль Вы хотите вставлять код примера?

      Ответить ↓
  4. Евгений

    Модуль для вставки произвольного HTML кода для Joomla

    Ответить ↓
  5. Таня

    Большое спасибо! Очень пригодилось.
    Еще добавила сюда
    behaviors: [«default», «scrollZoom»]
    чтобы карта реагировала на прокручивание колесика мышки.

    Ответить ↓
  6. Руслан

    Добрый вечер! Подскажите пжл как теперь полученный переменные перевести в php и через форму отправить в базу данных для сохранения?

    Ответить ↓
  8. ozij

    Очень помог данный инструмент, даже не знаю, что бы я делал без него. Потратил бы кучу времени. Спасибо!

    Ответить ↓
  9. Олег

    Спасибо за урок и пример, можно задать вопрос, как сделать чтобы по клику балун перемещался в нужное место?

    Ответить ↓
  10. Олег

    Admin, я не смог разабратся. могу вам заплотить за реализацию данного функционаламоя почта php84@bk.ru

    Ответить ↓
  11. Денис

    Доброго дня.
    Помогите пожалуйста в решении задачки:

    Прокладываю с помощью «ymaps.route(..)» путь.
    Возможно ли найти приблизительную середину пути для того, что-ты вставить туда метку с величиной расстояние между пунктами. Вот так вот:
    http://rghost.ru/46345843/image.png

    Заранее благодарю.

    Ответить ↓
  12. Павел

    Добрый день! А не подскажите как еще в строку при клике отслеживать и выводить(как координаты) полный адрес метки?)))
    Мое знание js оставляет желать лучшего((( 3 день мучаюсь(((

    Ответить ↓
  14. Светлана

    Павел, у меня такая же задача, подскажите как сделали, пожалуйста.

    Ответить ↓
  15. Вадим

    Отлично, только нужно в событие выбора результата поиска подправить не coords = SearchControl.getResultsArray()[0].geometry.getCoordinates();
    а coords = SearchControl.getResultsArray()[e.get(‘resultIndex’)].geometry.getCoordinates();
    так как у вас при любом выборе из списка поиска возвращаются координаты первого элемента(индекс 0)

    Ответить ↓

Добавить комментарий для Денис Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *