На одном проекте потребовалось получать координаты выделенной области на яндекс карте, после долгих изучений получилось следующее:
Код 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.getHuman Length() + ". Время - " + route.getHuman JamsTime();
//генерация события для перехвата в 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>