Получение координат по клику по карте Yandex API

Question

Пытаюсь подключить яндекс карты на свою страницу, для получение координат по клику по карте и добавления маркера. Чтобы в дальнейшем вбивать их в форму и отправлять данные. Никак не могу сообразить как это сделать. Направьте пожалуйста на нужную тропу. В документации много всякого написано, да я не могу вычленить, что мне подходит, ничего толком не объяснено.

async function initMap() {
  // Промис ymaps3.ready будет зарезолвлен, когда загрузятся все компоненты основного модуля API
  await ymaps3.ready;

  const { YMap, YMapDefaultSchemeLayer, YMapListener, YMapMarker } = ymaps3;

  // Иницилиазируем карту
  const map = new YMap(
    // Передаём ссылку на HTMLElement контейнера
    document.getElementById('map'),

    // Передаём параметры инициализации карты
    {
      location: {
        // Координаты центра карты
        center: [37.588144, 55.733842],

        // Уровень масштабирования
        zoom: 10
      }
    },
    [new YMapDefaultSchemeLayer({})]
  );

  // Обработчик кликов
  const clickCallback = (event) => {
    // Получаем глобальные пиксельные координаты клика
    const { globalPixels } = event;

    // Преобразуем пиксельные координаты в географические
    const coordinates = map.globalPixelsToCoordinates(globalPixels);

    // Выводим координаты в консоль
    console.log('Координаты клика:', coordinates);

    // Для примера добавим маркер на место клика
    const marker = new YMapMarker({
      geometry: { coordinates },
      properties: { balloonContent: 'Место клика' },
    });
    map.addChild(marker);
  };

  // Создаём слушатель карты
  const mapListener = new YMapListener({
    layer: 'any', // Слушаем события на любом слое
    onClick: clickCallback, // Устанавливаем обработчик кликов
  });

  // Добавляем слушатель и слой на карту
  map.addChild(new YMapDefaultSchemeLayer());
  map.addChild(mapListener);
}

// Инициализируем карту
initMap();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Effective Temperature Sum</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="weather-container">
     <div id="map" style="width: 600px; height: 400px; background-color: red;"></div>
  </div>
  <script src="https://api-maps.yandex.ru/v3/?apikey=62e3fbe2-5fc5-4b7d-b9f0-86acc43edb26&lang=ru_RU"></script>
  <script src="script.js"></script>
</body>

</html>

Answer 1

Для работы с маркерами сначала следует добавить слой, на который они будут добавляться — YMapDefaultFeaturesLayer:

map.addChild(new YMapDefaultFeaturesLayer())

Который прежде следует объявить в ymaps3:

const { YMap, YMapDefaultSchemeLayer, YMapListener, YMapMarker, YMapDefaultFeaturesLayer } = ymaps3;

Слушатель вы добавляете верно, но обработчик необходимо задавать иначе, а координаты событие клика возвращает не пиксельные, а сразу географические:

  // Обработчик кликов
  const clickCallback = (object, event) => {
    const coordinates = event.coordinates;
    // Выводим координаты в консоль
    console.log('Координаты клика:', coordinates);
    // Создание элемента метки
    // ...
    // Добавление маркера на место клика
    // ...
  };

И кастомные маркеры сначала необходимо создавать отдельно как html-элемент:

// Создание элемента метки
const markerElement = document.createElement('div');
markerElement.className = 'marker-class';
markerElement.innerText = "Место ↓ клика";
markerElement.style = "position:relative;background:#fff;border:1px solid#aaa;width:99px;height:20px;left:-50px;top:-21px";

И уже только после этого добавлять по координатам клика, указав элемент:

// Добавление маркера на место клика
const marker = new YMapMarker({
  coordinates: coordinates,
}, markerElement);
map.addChild(marker);

Демо-пример: https://jsbin.com/metotit/2/edit?js,output

БЛОГ НА HUSL

Получение координат по клику по карте Yandex API

Ответы (1 шт):