При клике на карту по нужному адресу нужно проверить входит ли метка в окружности других меток
Слабые знания js. Скажите куда копать? Есть массив меток (у каждой метки свои координаты), вывожу на карту. При клике на карту по нужному адресу (дом или поле) нужно проверить входит ли метка в окружности других меток (которые я вывел). Как делал я, сформировал карту и вместо меток вывел массив circle с радиусом 200. Как проверить условием не знаю и правильно ли я сделал? может лучше вывести метки а по клику на карту добавлять невидимый circle и проверять? Может кто делал похожее? Помогите пожалуйста!)
Ответы (1 шт):
У меня получилось вот так: https://jsfiddle.net/naivv/jaogk38s/ . Я использовал выбору геообъектов (https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/geoquery-docpage/ ). Метки на карте расставляются случайно при загрузке страницы. При щелчке по карте выводится круг радиусом 10 км (чтобы убрать круг, щелкните карту еще раз).
В обработчике события 'click' проверяйте objectsInsideCircle.getLength() - если значение больше нуля, выполняйте нужное действие.
ymaps.ready(init);
var myMap, myCircle,
MY_RADIUS = 10000; // радиус поиска, в метрах
function init() {
myMap = new ymaps.Map("map", {
center: [55.74, 37.58], //Москва
zoom: 11
}, {
balloonMaxWidth: 200,
searchControlProvider: 'yandex#search'
});
// Создадим коллекцию геообъектов и зададим опции.
var myGeoObjects = new ymaps.GeoObjectCollection({}, {
preset: "islands#greenIcon",
strokeWidth: 4,
geodesic: true
});
// Добавим в коллекцию метки
for (var i = 1; i < 10; i++) {
var rndCoords = [55 + getRandom(1), 37 + getRandom(1)];
myGeoObjects.add(new ymaps.Placemark(rndCoords, {
iconContent: i,
hintContent: rndCoords
}));
}
// Добавим коллекцию на карту.
myMap.geoObjects.add(myGeoObjects);
// Установим карте центр и масштаб так, чтобы охватить коллекцию целиком.
myMap.setBounds(myGeoObjects.getBounds());
// Создание GeoQueryobjects из коллекции геообъектов
var objects = ymaps.geoQuery(myGeoObjects).addToMap(myMap);
// https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/geoquery-docpage/
// Обработка события, возникающего при щелчке
// левой кнопкой мыши в любой точке карты.
myMap.events.add('click', function(e) {
if (myMap.geoObjects.indexOf(myCircle) < 0) {
var clickCoords = e.get('coords');
// определяем ближайшую метку
var closestObject = objects.getClosestTo(clickCoords);
// получаем название метки (число на значке)
var objLabel = closestObject.properties.get('iconContent');
// получаем координаты метки
var objCoords = closestObject.geometry.getCoordinates();
// определяем расстояние между точками в метрах
var distance = ymaps.coordSystem.geo.getDistance(clickCoords, objCoords);
// форматируем расстояние с учетом текущего языка
var humanDistance = ymaps.formatter.distance(distance);
// TODO
// Создаем круг.
myCircle = new ymaps.Circle([
// Координаты центра круга.
clickCoords,
// Радиус круга в метрах.
MY_RADIUS
], {
// Описываем свойства круга.
// Содержимое хинта.
hintContent: clickCoords.join(', ')
}, {
// Задаем опции круга.
// Включаем возможность перетаскивания круга.
draggable: false,
// прозрачность
opacity: 0.2,
// Цвет заливки.
fillColor: "#DB7093",
// Цвет обводки.
strokeColor: "#990066",
// Ширина обводки в пикселях.
strokeWidth: 2
});
// Добавляем круг на карту.
myMap.geoObjects.add(myCircle);
// определяем метки, попавшие в круг
var objectsInsideCircle = objects.searchInside(myCircle);
var objLabels = [];
// получаем название метки (число на значке) и складываем в массив
objectsInsideCircle.each(function (pm) {
objLabels.push(pm.properties.get('iconContent'));
});
myCircle.properties.set({
// Содержимое балуна.
balloonContent: '<b>Радиус круга: ' + ymaps.formatter.distance(MY_RADIUS) + '</b>' +
'<p>Координаты щелчка:<br/>' + [
clickCoords[0].toPrecision(6),
clickCoords[1].toPrecision(6)
].join(', ') + '</p>' +
'<p>Найдено точек: ' + '<b>' + objectsInsideCircle.getLength() + '</b><br/>' +
' (' + objLabels.join(', ') + ')</p>' +
'<p>Ближайшая метка:<b>' + objLabel + '</b><br/>(' + [
objCoords[0].toPrecision(6),
objCoords[1].toPrecision(6)
].join(', ') + '; ' +
'<br/>расстояние: ' + humanDistance + ').</p>' +
'<sup>Щелкните карту еще раз</sup>',
});
myCircle.balloon.open(clickCoords);
} else {
myMap.geoObjects.remove(myCircle);
myCircle = null;
}
});
// Скрываем хинт при открытии балуна.
myMap.events.add('balloonopen', function(e) {
myMap.hint.close();
});
// случайное число для координат метки
function getRandom(max) {
return Math.random() * (max);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Координаты щелчка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=60445215-6d3a-4f88-87fe-8d52b72e5bc9" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>