JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug&ns=ym"></script>
<div id="map"></div>
CSS
html, body, #map {
width: 100%;
height: 100%;
}
Babel + JSX
ym.modules.define('geo.isInsidePolygon', provide => {
function rayCrossesSegment(point, a, b) {
let [[py, px], [ay, ax], [by, bx]] = [point, a, b];
if (ay > by) {
[ay, ax, by, bx] = [by, bx, ay, ax];
}
if (px < 0) { px += 360 };
if (ax < 0) { ax += 360 };
if (bx < 0) { bx += 360 };
if (py == ay || py == by) py += 0.00000001;
if ((py > by || py < ay) || (px > Math.max(ax, bx))) return false;
if (px < Math.min(ax, bx)) return true;
var red = (ax != bx) ? ((by - ay) / (bx - ax)) : Infinity;
var blue = (ax != px) ? ((py - ay) / (px - ax)) : Infinity;
return (blue >= red);
}
provide(function isInsidePolygon(point, polygon) {
let crossings = 0;
for (var i=0, l = polygon.length; i < l; i++) {
var a = polygon[i],
j = i + 1;
if (j >= polygon.length) {
j = 0;
}
var b = polygon[j];
if (rayCrossesSegment(point, a, b)) {
crossings++;
}
}
return (crossings % 2 == 1);
});
});
ym.modules.define('geo.bbox', provide => {
provide(points => {
let bbox = [[...points[0]], [...points[0]]];
points.forEach(([lat, long]) => {
if (lat > bbox[0][0]) bbox[0][0] = lat;
if (lat < bbox[1][0]) bbox[1][0] = lat;
if (long < bbox[0][1]) bbox[0][1] = long;
if (long > bbox[1][1]) bbox[1][1] = long;
});
return bbox;
});
});
ym.ready(() => {
const points = [];
let polygon;
const searchPoint = [55.80372587787369, 37.58197845458982];
const map = new ym.Map('map', {
center: [55.76, 37.64],
zoom: 11,
controls: []
});
map.geoObjects.add(new ym.Placemark(searchPoint, {hintContent: 'Расположение организации'}, {preset: 'islands#circleDotIcon', iconColor: 'red'}));
ym.modules.require(['geo.isInsidePolygon']).spread(isInside => {
map.events.add('click', event => {
points.push(event.get('coords'));
map.geoObjects.add(new ym.Placemark(event.get('coords')));
if (points.length > 2) {
...