HelpF.pro

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

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

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

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

Код 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>
Опубликовано на сайте: https://HelpF.pro
Прямая ссылка: https://HelpF.pro/faq/view/1854.html