JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"/>
CSS
#map {
width: 600px;
height: 600px;
}
JavaScript
var myMap;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [55.76, 37.64], // Москва
zoom: 4
});
function contains(coords, bbox) {
var lat = coords[0],
lon = coords[1];
return bbox[1] < bbox[3]?
lat > bbox[0] && lat < bbox[2] && lon > bbox[1] && lon < bbox[3] :
lat > bbox[0] && lat > bbox[2] && ((lon < 180 && lon > bbox[1]) || (lon > -180 && lon < bbox[3]));
}
var r = new ymaps.Rectangle(myMap.getBounds(), {}, { draggable: true, interactivityModel: 'default#transparent' });
myMap.geoObjects.add(r);
myMap.events.add('click', function (e) {
var coords = e.get('coords'),
bounds = r.geometry.getBounds(),
bbox = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
alert(r.geometry.contains(coords) == contains(coords, bbox));
});
}