Skip to content
07.06.2023
  • Технология
  • Новости
  • В мире

Технологии

Primary Menu
  • Технология
  • Новости
  • В мире
  • Home
  • 2021
  • Январь
  • 23
  • Технология

Яндекс карта с управлением для сайта

admin 23.01.2021 1 min read

yamap-1504683

23 мая 2020 JavaScript

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!

Подключение скриптов

yamap1-1024x496-4156785 Геокодер API Яндекс.Карт

Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):


HTML-код

Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты . Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.

Показать на карте
Показать на карте
Показать на карте


        #map {
                width: 100%; height: 400px; padding: 0; margin: 0;
        }

JavaScript-код

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.742932093456126,37.62389544445802],
            zoom: 16,
            controls: []
        }),

        myGeoObject = new ymaps.GeoObject({


        });

    var address1 = new ymaps.Placemark([55.742932093456126,37.62389544445802], {
        balloonContent: 'Точка 1',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    var address2 = new ymaps.Placemark([55.791055862396824,37.52825102327829], {
        balloonContent: 'Точка 2',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    var address3 = new ymaps.Placemark([55.82726918688044,37.637157631026405], {
        balloonContent: 'Точка 3',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    myMap.geoObjects
        .add(myGeoObject)
        .add(address1)
        .add(address2)
        .add(address3);


    var mapControls = $('.map-control');
    var destinations = {
        '#address1': address1,
        '#address2': address2,
        '#address3': address3
    };
    mapControls.each(function(item, i) {
                
                // Прокрутка к блоку с картой и переход к точке
        $(this).bind('click', function() {
                var position = $('#map').offset().top;
                window.scrollTo(0, position);
                var destination = destinations[$(this).attr('href')];
                myMap.panTo(destination.geometry.getCoordinates(), {
                    flying: true,
                    duration: 3000
                })
                return false;
            }
        );
    });
}

В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке. Кстати координаты точек вы можете получить в Геокодере API Яндекс.Карт.

Continue Reading

Previous: IT-Blog — Страница 21 из 21 — интернет, технологии, программирование
Next: WordPress создание темы с нуля

Related Stories

Захват изображения с камеры с помощью HTML5 mediacapture-2460556
1 min read
  • Технология

Захват изображения с камеры с помощью HTML5

29.04.2023
Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4 analytics-intelligence-step-1-sign-in
1 min read
  • Технология

Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4

26.04.2023
Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство mastering-analytics-intelligence-in-ga4-hero-image-730x548-2691257
1 min read
  • Технология

Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство

26.04.2023

You may have missed

Захват изображения с камеры с помощью HTML5 mediacapture-2460556
1 min read
  • Технология

Захват изображения с камеры с помощью HTML5

29.04.2023
Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4 analytics-intelligence-step-1-sign-in
1 min read
  • Технология

Освоение аналитики: получение максимальной отдачи от аналитических данных в GA4

26.04.2023
Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство mastering-analytics-intelligence-in-ga4-hero-image-730x548-2691257
1 min read
  • Технология

Что такое ошибка DNS_PROBE_FINISHED_NXDOMAIN? Полное руководство

26.04.2023
Как создавать отчеты по аналитике веб-сайта в Looker Studio (шаг за шагом) customize-the-report
1 min read
  • Технология

Как создавать отчеты по аналитике веб-сайта в Looker Studio (шаг за шагом)

26.04.2023
  • Технология
  • Новости
  • В мире
  • Технология
  • Новости
  • В мире
Copyright © All rights reserved. | MoreNews by AF themes.