На одном проекте потребовалось получать координаты выделенной области на яндекс карте, после долгих изучений получилось следующее:
Вид Формы: На карте выделяете объект, нажимаете кнопку Получить координаты выделенной области и заполняется таблица координат
Код инициализации карты и обработчик кнопки получения координат:
Процедура ИнициализироватьКарту() ПутьКФайлу = КаталогВременныхФайлов()+"yamaps.html"; Ф = новый Файл(ПутьКФайлу); Если Ф.Существует() Тогда УдалитьФайлы(ПутьКФайлу); КонецЕсли; Т = новый ТекстовыйДокумент; ТД = ЭтотОбъект.ПолучитьМакет("МакетЯндекс"); Т.УстановитьТекст(ТД.ПолучитьТекст()); Т.Записать(ПутьКФайлу); ЭлементыФормы.Эксплорер.Перейти(ПутьКФайлу); КонецПроцедуры Процедура ВыполнитьСкрипт(Команда) Экспорт ЭлементыФормы.Эксплорер.document.getElementById("WebClientOperation").value = Команда; ЭлементыФормы.Эксплорер.document.getElementById("WebClient").click(); КонецПроцедуры Процедура ПриОткрытии() ИнициализироватьКарту(); КонецПроцедуры Процедура ПолучитьКоординатыНажатие(Элемент) ВыполнитьСкрипт("GetGEO();"); ТекКоординаты=ЭлементыФормы.Эксплорер.document.getElementById("geometry").innerText; ТекКоординаты=СтрЗаменить(ТекКоординаты,"Координаты: [",""); МассивСтроки = ОбщегоНазначения.РазложитьСтрокуВМассивПодстрок(ТекКоординаты, "], [ "); Точки.Очистить(); Для Каждого стр из МассивСтроки Цикл Текстр=СтрЗаменить(стр,"[",""); Текстр=СтрЗаменить(Текстр,"]",""); Текстр=СокрЛП(Текстр); нСтрок=Точки.Добавить(); симвЗапятой=Найти(Текстр,","); нСтрок.Широта=Лев(Текстр,симвЗапятой-1); нСтрок.Долгота=Сред(Текстр,симвЗапятой+2,СтрДлина(Текстр)); КонецЦикла; //Сообщить(ТекКоординаты); КонецПроцедуры
Макет
<!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>
