Top.Mail.Ru

Отображение точек на карте Яндекс по адресам

Отображение точек на карте Яндекс по адресам

Для отображения точек на карте Яндекс по адресам, нужно геокодировать адреса (преобразовать их в координаты). Яндекс.Карты API предоставляет функцию ymaps.geocode для этого. Вот пример, как это можно сделать:

Пример кода с добавлением точек на карту по адресам:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=f67169e2-5c8e-44e4-9039-26ecbae9ce80" type="text/javascript"></script>

<div id="map" style="width: 100%; height: 500px;"></div>

<script>
ymaps.ready(init);

function init() {
    // Создаем карту.
    const map = new ymaps.Map("map", {
        center: [55.755814, 37.617635], // Центр карты (Москва).
        zoom: 10, // Уровень масштабирования.
    });

    // Массив адресов
    const addresses = [
        "Москва, Красная площадь, 1",
        "Москва, Новый Арбат, 24",
        "Москва, Тверская улица, 7"
    ];

    // Добавляем точки на карту
    addresses.forEach((address) => {
        // Геокодируем адрес
        ymaps.geocode(address).then((res) => {
            const geoObject = res.geoObjects.get(0);
            if (geoObject) {
                const coords = geoObject.geometry.getCoordinates();
                // Создаем метку и добавляем ее на карту
                const placemark = new ymaps.Placemark(
                    coords, 
                    { balloonContent: address }, // Текст в балуне
                    { preset: "islands#icon", iconColor: "#0095b6" } // Настройки иконки
                );
                map.geoObjects.add(placemark);
            } else {
                console.error(`Не удалось найти координаты для адреса: ${address}`);
            }
        });
    });
}
</script>

 

Что делает код:

  1. Геокодирование адресов:
    Используется метод ymaps.geocode(address) для получения координат каждого адреса.

  2. Добавление меток:
    Для каждой точки создается объект Placemark, который добавляется на карту с помощью map.geoObjects.add(placemark).

  3. Массив адресов:
    Вы можете заменить адреса в массиве addresses на свои.

  4. Настройка балунов:
    При клике на метку отображается адрес в балуне (balloonContent).

На карте появятся метки по указанным адресам. Если адрес некорректен или не найден, в консоли будет сообщение об ошибке.

 

Автор:

35

Читайте также

0 комментариев