Как получить координаты выделенной области на Яндекс Карте?

На одном проекте потребовалось получать координаты выделенной области на яндекс карте, после долгих изучений получилось следующее:

Вид Формы: На карте выделяете объект, нажимаете кнопку Получить координаты выделенной области и заполняется таблица координат

Код инициализации карты и обработчик кнопки получения координат:

Код 1C v 8.х

 Процедура ИнициализироватьКарту()

	

	ПутьКФайлу = КаталогВременныхФайлов()+"yamaps.html";

	Ф = новый Файл(ПутьКФайлу);

	Если Ф.Существует() Тогда

		УдалитьФайлы(ПутьКФайлу);

	КонецЕсли; 

	

	Т = новый ТекстовыйДокумент;

	ТД = ЭтотОбъект.ПолучитьМакет("МакетЯндекс");

	Т.УстановитьТекст(ТД.ПолучитьТекст());

	Т.Записать(ПутьКФайлу);

		

	ЭлементыФормы.Эксплорер.Перейти(ПутьКФайлу);

КонецПроцедуры





Процедура ВыполнитьСкрипт(Команда) Экспорт 

	ЭлементыФормы.Эксплорер.document.getElementById("WebClientOperation").value = Команда;

	ЭлементыФормы.Эксплорер.document.getElementById("WebClient").click();

КонецПроцедуры





Процедура ПриОткрытии()

	ИнициализироватьКарту();

КонецПроцедуры





Процедура ПолучитьКоординатыНажатие(Элемент)

	ВыполнитьСкрипт("GetGEO();");

	ТекКоординаты=ЭлементыФормы.Эксплорер.document.getElementById("geometry").innerText;

	ТекКоординаты=СтрЗаменить(ТекКоординаты,"Координаты: [","");

	МассивСтроки = ОбщегоНазначения.РазложитьСтрокуВМассивПодстрок(ТекКоординаты, "], [ ");

	Точки.Очистить();

	Для Каждого стр из МассивСтроки Цикл 

		Текстр=СтрЗаменить(стр,"[","");

		Текстр=СтрЗаменить(Текстр,"]","");

		Текстр=СокрЛП(Текстр);

		нСтрок=Точки.Добавить();

		симвЗапятой=Найти(Текстр,","); 

		нСтрок.Широта=Лев(Текстр,симвЗапятой-1);

		нСтрок.Долгота=Сред(Текстр,симвЗапятой+2,СтрДлина(Текстр));

	КонецЦикла;	

	//Сообщить(ТекКоординаты);

КонецПроцедуры

Макет

Код VBS

 <!DOCTYPE html">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=9"/>

    <style type="text/css">

	  html { height: 100% }

	  body { height: 100%; margin: 0px; padding: 0px }

	  #map { height: 100% }

	</style>

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

	<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>	

    <script type="text/javascript">

	var index = 1;

	var MyMap, route;

	var clusterer;

	var PointArray = [];

	var noclick = false;

	

	ymaps.ready(init);

	function init(){  

		myMap = new ymaps.Map ("map", {

			center: [55.75, 37.62],

			zoom: 10

		}),

        polygon = new ymaps.GeoObject({

        geometry: {

            type: "Polygon",

            coordinates: []

        }

  	  });

		myMap.behaviors.enable('scrollZoom');

		myMap.behaviors.disable('dblClickZoom');

			

		myMap.events.add('click', function (e) {

			if (!noclick) {

			//	addMarker(e.get('coords')); 				

			}else{

				noclick = false;

			}

		});

		

		myMap.events.add('drag end', function (e) {

			noclick = true;			

			document.getElementById('CoordX').value = "0";

			document.getElementById('CoordY').value = "0";

		});

		

		// создадим кластеризатор и запретим приближать карту при клике на кластеры

		//clusterer = new ymaps.Clusterer({clusterDisableClickZoom: true, synchAdd: true});

		//myMap.geoObjects.add(clusterer);

		

	myMap.geoObjects.add(polygon);

    polygon.editor.startDrawing();

	$('input').attr('disabled', false);

 

            // Обработка нажатия на любую кнопку.

            $('input').click(

                function () {

                    // Отключаем кнопки, чтобы на карту нельзя было

                    // добавить более одного редактируемого объекта (чтобы в них не запутаться).

                    $('input').attr('disabled', true);

					GetGEO();

                });

	}

	

	function addMarker(coordPosition){

		myPlacemark = new ymaps.Placemark(coordPosition, {

			// Свойства

			// Текст метки

			iconContent: 'Точка'+index

		}, {

			// Опции

			// Иконка метки будет растягиваться под ее контент

			preset: 'islands#blueStretchyIcon'

		});

		myMap.geoObjects.add(myPlacemark);

		

		document.getElementById('CoordX').value = coordPosition[0].toPrecision(15);

		document.getElementById('CoordY').value = coordPosition[1].toPrecision(15);

		index++;

	}

		

	function calcRoute(options){

		ymaps.route(options, {

	        // Опции маршрутизатора

	        mapStateAutoApply: true, // автоматически позиционировать карту

	        avoidTrafficJams: false   // Учитывать пробки

	    }).then(

		    function (router) {

		    route = router;

		        myMap.geoObjects.add(route);

		        

		        //заполняем и сохраняем инфо про маршрут

		        document.getElementById('RouteInfo').value = "Длина маршрута - " + route.getHumanLength() + ". Время - " + route.getHumanJamsTime();

		        

		        //генерация события для перехвата в 1С

		        var evt = document.createEventObject();

  				document.body.fireEvent('ondatasetcomplete', evt);

		    },

		    function (error) {

		        alert("Возникла ошибка: " + error.message);

	    });

	}

	

	function calcLine(options){

		var poly = new ymaps.Polyline(options, {

				hintContent: "Маршрут",

				balloonContent: "Маршрут экспедитора",

				balloonContentHeader: "",

				balloonContentBody: "",

				balloonContentFooter: ""

			}, {

				cursor: "pointer",

				draggable: false,

				hasBalloon: true,

				hasHint: true,

				interactiveZIndex: false,

				opacity: 1,

				openBalloonOnClick: true,

				openEmptyBalloon: false,

				openEmptyHint: false,

				openHintOnHover: true,

				strokeColor: '#E33926',

				strokeOpacity: 0.8,

				strokeStyle: '',

				strokeWidth: 5,

				syncOverlayInit: false,

				visible: true

			});

			myMap.geoObjects.add(poly);	

			myMap.setBounds(poly.geometry.getBounds());

	}

	

	function Reset(){

		// Удаляем все геообъекты на карте

		myMap.geoObjects.removeAll();   		   		

		PointArray = [];

		index = 1;

	}

	

	function ChangeCityMSK(){

		myMap.panTo([55.75, 37.62], {

            flying: 1

        });

	}

	function ChangeCitySPB(){

		myMap.panTo([59.938531, 30.313497], {

            flying: 1

        });

	}

	function ChangeCityKRAS(){

		myMap.panTo([45.04, 38.97], {

            flying: 1

        });

	}

	function ChangePlace(k,d){

		myMap.panTo([k, d], {

            flying: 1

        });

	}





	

	function FindAdres(Adres){

		Reset();

		var myGeocoder = ymaps.geocode(Adres);

		myGeocoder.then(

			function (res){

			var firstGeoObject = res.geoObjects.get(0);

			if(firstGeoObject != null){

				myMap.panTo(

					// Координаты нового центра карты

					firstGeoObject.geometry.getCoordinates(), {

						/* Опции перемещения:

						   разрешить уменьшать и затем увеличивать зум

						   карты при перемещении между точками 

						*/

						flying: true

					}

				);

				

				myPlacemark = new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {

					// Свойства

					// Текст метки

					iconContent: Adres

				}, {

					// Опции

					// Иконка метки будет растягиваться под ее контент

					preset: 'islands#blueStretchyIcon'

				});

				myMap.geoObjects.add(myPlacemark);

			}else{

				alert("Ничего не найдено");}

			}

		);

	}

		

	function ReverseSearchAdres(CoordX, CoordY, Adres){

		Reset();

		

		var CoordPosition = [CoordX, CoordY];

		myMap.panTo(

		    // Координаты нового центра карты

		    CoordPosition, {

		        /* Опции перемещения:

		           разрешить уменьшать и затем увеличивать зум

		           карты при перемещении между точками 

		        */

		        flying: true

		    }

		);

		

		myPlacemark = new ymaps.Placemark(CoordPosition, {

			// Свойства

			// Текст метки

			iconContent: Adres

		}, {

			// Опции

			// Иконка метки будет растягиваться под ее контент

			preset: 'islands#blueStretchyIcon'

		});

		myMap.geoObjects.add(myPlacemark);

	}

	

	function addToPointArrayM(CoordX, CoordY, TextC, Text){

	var CoordPosition = [CoordX, CoordY];

	myPlacemark = new ymaps.Placemark(CoordPosition, {

			// Свойства

			// Текст метки

			iconContent: Text

		}, {

			// Опции

			// Иконка метки будет растягиваться под ее контент

			preset: TextC

		});

		myMap.geoObjects.add(myPlacemark);

	}

	

	function addToPointArrayPointOne(CoordX, CoordY, ID, Text){

		var point = new ymaps.GeoObject({

		    geometry: {type: "Point", coordinates: [CoordX, CoordY>,

		    properties: {

		        clusterCaption: ID,

		        iconContent: ID, 

		        hintContent: ID,  

		        balloonContent: Text, 

		        balloonContentBody: Text

		    }

			});

		myMap.geoObjects.add(point);

	}





	function addToPointArray(CoordX, CoordY, ID, Text){

		var point = new ymaps.GeoObject({

		    geometry: {type: "Point", coordinates: [CoordX, CoordY>,

		    properties: {

		        clusterCaption: ID,

		        iconContent: ID, 

		        hintContent: ID,  

		        balloonContent: Text, 

		        balloonContentBody: Text

		    }

			});

		PointArray.push(point);

	}

	

	function drawCluster(){

		clusterer.add(PointArray);

		myMap.geoObjects.add(clusterer);

	}	

	

	function createPolygon(ArrayPoint, Name, color) {

		// Создаем многоугольник

        myPolygon = new ymaps.Polygon([

            // Координаты вершин внешней границы многоугольника.

            ArrayPoint

        ], {

            //Свойства

            hintContent: Name

        }, {

            // Опции.

            // Цвет заливки (зеленый)

            fillColor: color,

            // Цвет границ (синий)

            strokeColor: '#0000FF',

            // Прозрачность (полупрозрачная заливка)

            opacity: 0.6,

            // Ширина линии

            strokeWidth: 5,

            // Стиль линии

            strokeStyle: 'shortdash'

        });

            

        myMap.geoObjects.add(myPolygon);

    }	

    

    function WebClientClick() {

    	//очистка перед кликом координат, иначе после клика в упр. формах идет считывание координат

    	document.getElementById('CoordX').value = "0";

		document.getElementById('CoordY').value = "0";

    	

    	var WebClientOperation = document.getElementById("WebClientOperation").value;

		//alert(WebClientOperation);

		switch (WebClientOperation) {

        	case "0":   // ничего не делаем

        	   var a = 1; 

        	default:   // запускаем функцию

        	    eval(WebClientOperation);

        }

        document.getElementById('WebClientOperation').value = "0";

	} 

	

function GetGEO(){

polygon.editor.stopEditing(); 

printGeometry(polygon.geometry.getCoordinates());

}

// Выводит массив координат геообъекта в <div id="geometry">

function printGeometry (coords) {

$('#geometry').html('Координаты: ' + stringify(coords));





function stringify (coords) {

	var res = '';

	if ($.isArray(coords)) {

		res = '[ ';

		for (var i = 0, l = coords.length; i < l; i++) {

			if (i > 0) {

				res += ', ';

			}

			res += stringify(coords[i]);

		}

		res += ' ]';

	} else if (typeof coords == 'number') {

		res = coords.toPrecision(6);

	} else if (coords.toString) {

		res = coords.toString();

	}





	return res;

}

}   		

    </script>

</head>





<body>

<div id="geometry"/></div>

<div id="map" style="width:100%; height:100%"></div>

    <input type="hidden" id="CoordX" name="CoordX" value="0"></input>

    <input type="hidden" id="CoordY" name="CoordY" value="0"></input>

    <input type="hidden" id="RouteInfo" name="RouteInfo" value=""></input>

    <input type="hidden" id="WebClientOperation" name="WebClientOperation" value="0"></input>

    <input type="hidden" id="WebClient" name="WebClient" onclick="WebClientClick();"></input>

    <!-- <input type="button" value="Завершить редактирование" id="stopEditPolyline"/> -->

</body>

</html>

Как получить координаты выделенной области на Яндекс Карте?

Похожие FAQ

Еще в этой же категории

Ключевые слова и Изображения

Слова упорядочены по частоте использования в тексте

Изображения