JSFiddle - React, Tailwind, and code Playground

by Zhyravlev_AS

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="width:100%;height:300px;"></div>

JavaScript

var myMap,
	myPlacemark,
	myCollection;
	
ymaps.ready(init);

function init(){ 

	myMap = new ymaps.Map ("map", {
		center: [55.76, 37.64],
		zoom: 7
	});
	
	// Отключить увеличение карты 2м кликом
	myMap.behaviors.disable('dblClickZoom');
	
	// Коллекция меток
	myCollection = new ymaps.GeoObjectCollection({}, {
	   preset: 'islands#redIcon', //все метки красные
	   draggable: true, // и их можно перемещать
	});
	
	// добавляем коллекцию на карту
	myMap.geoObjects.add(myCollection);
	
	// Кнопка добавления метки
	var marker_button = new ymaps.control.Button({
		 data: {
			 content: 'Добавить метку'
		 }
	}, {
		selectOnClick: false
	});
	
	// Добавить кнопку в панель
	myMap.controls.add(marker_button);
	
	// При клике по кноаке, моздаем метку
	marker_button.events.add('click', function(){ addMarker() });
}


function addMarker(){
	
	var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {});
	
	// добавляем в коллекцию метку
	myCollection.add(myPlacemark);
	
	myPlacemark.events.add('dragend', function(e) {		   
	   ymaps.geoQuery(myMap.geoObjects).search('geometry.type == "Point"').each(function(pm){
			// координаты метки
			console.log(pm.geometry.getCoordinates());
	   });
	});
	
	// 2й клик по метке
	myPlacemark.events.add('dblclick', function(e) {
        // КАК УДАЛИТЬ?
		var thisPlacemark = e.get('target');
		myMap.geoObjects.remove(thisPlacemark);
	});
}