JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<div id="map"></div>
<button id="del">Убрать с карты</button>
CSS
#map {
width: 950px;
height: 420px;
};
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 10,
controls: [
'fullscreenControl',
'zoomControl',
'searchControl'
]
}, {
maxZoom: 15,
minZoom: 10
}),
polygon = new ymaps.Polygon(
[
[
[55.791519747099514,37.274757232429494],
[55.84332413949289,37.55216201758575],
[55.664422501420916,37.74991592383576],
[55.67528849116848,37.24866470313263],
[55.791519747099514,37.274757232429494]
]
]
, {}, {
// Курсор в режиме добавления новых вершин.
editorDrawingCursor: "crosshair",
// Максимально допустимое количество вершин.
editorMaxPoints: 5,
// Цвет заливки.
fillColor: '#00FF00',
fillOpacity: 0.5,
// Цвет обводки.
strokeColor: '#0000FF',
// Ширина обводки.
strokeWidth: 5
});
myMap.geoObjects.add(polygon);
polygon.editor.startDrawing();
document.getElementById('del').onclick = function ()
{
polygon.editor.stopDrawing();
myMap.geoObjects.remove(polygon);
}
});