Как добавить кнопки zoom на Яндекс Карту?

Ссылка скопирована
JavaScript React Яндекс.Карты
1 ответ

Ужасно запарился, выручайте. Документацию читал, но как-то не так, по всей видимости.

Подключаю скрипт

<script src="https://api-maps.yandex.ru/v3/?apikey=API&lang=ru_RU"></script> <script>

<script src="https://api-maps.yandex.ru/v3/?apikey=API&lang=ru_RU"></script> <script>

Короче, сам код добавления карты на html страницу

initMap();  async function initMap() {   // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API   await ymaps3.ready;    const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls, YMapZoomControl} = ymaps3;    const map = new YMap(       // Передаём ссылку на HTMLElement контейнера       document.getElementById('map'),       // Передаём параметры инициализации карты       {           location: {               // Координаты центра карты               center: [37.588144, 55.733842],               // Уровень масштабирования               zoom: 10           },           behaviors: ['drag', 'pinchZoom', 'dblClick']       }   );    // Добавляем слой для отображения схематической карты   map.addChild(new YMapDefaultSchemeLayer({     theme: "dark", customization: mapCustomizationJson   }));      // Пытаюсь добавить кнопку Зума   const controls = new YMapControls();   controls.addChild(       new YMapZoomControl({           easing: 'linear'       })   );      map.addChild(controls);     map.addChild(new YMapDefaultFeaturesLayer()); }

initMap(); async function initMap() { // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API await ymaps3.ready; const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls, YMapZoomControl} = ymaps3; const map = new YMap( // Передаём ссылку на HTMLElement контейнера document.getElementById('map'), // Передаём параметры инициализации карты { location: { // Координаты центра карты center: [37.588144, 55.733842], // Уровень масштабирования zoom: 10 }, behaviors: ['drag', 'pinchZoom', 'dblClick'] } ); // Добавляем слой для отображения схематической карты map.addChild(new YMapDefaultSchemeLayer({ theme: "dark", customization: mapCustomizationJson })); // Пытаюсь добавить кнопку Зума const controls = new YMapControls(); controls.addChild( new YMapZoomControl({ easing: 'linear' }) ); map.addChild(controls); map.addChild(new YMapDefaultFeaturesLayer()); }

Я сюда не положил переменную mapCustomizationJson, т.к. она огромная (и вроде на кнопки зума не влияет)

Короче, в документации написано, что ср*ный зум добавляется так:

const map = new YMap(element, {   location: {center: [37.588144, 55.733842], zoom: 14} });  const controls = new YMapControls(); controls.addChild(   new YMapZoomControl({     easing: 'linear'   }) );  map.addChild(controls);

const map = new YMap(element, { location: {center: [37.588144, 55.733842], zoom: 14} }); const controls = new YMapControls(); controls.addChild( new YMapZoomControl({ easing: 'linear' }) ); map.addChild(controls);

Как вы можете видеть в моем коде, я так и сделал (как мне кажется).
Ошибка, которую я получаю

Uncaught (in promise) TypeError: YMapZoomControl is not a constructor
at initMap ((index):1097:7)

Я не знаю в чем дело и чертовски близок к тому, чтобы сдаться.
В свой код я также добавил два класса YMapControls, YMapZoomControl

const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls, YMapZoomControl} = ymaps3;

const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls, YMapZoomControl} = ymaps3;

Дополнительно:

YMapZoomControl импортируется из другого места. Сам недавно матерился по этому поводу. У них все самое полезное можно в примерах найти https://yandex.ru/dev/jsapi30/doc/ru/examples/case...

const {YMapZoomControl} = await ymaps3.import('@yandex/ymaps3-controls@0.0.1')

const {YMapZoomControl} = await ymaps3.import('@yandex/ymaps3-controls@0.0.1')

  • Спасибо, добрый человек! Вы меня очень сильно выручили
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

Для добавления кнопок увеличения и уменьшения (zoom) на Яндекс Карту, вам потребуется использовать API Яндекс Карт. Вот пример кода на JavaScript, который позволит вам добавить кнопки zoom на карту:

 
 
 
    <title>Добавление кнопок zoom на Яндекс Карту</title>
 
 
        #map {
            width: 100%;
            height: 400px;
        }
 
 
 
    <div id="map"></div>
 
        ymaps.ready(init);
 
        function init() {
            var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 10
            });
 
            var zoomControl = new ymaps.control.ZoomControl({
                options: {
                    size: "small",
                    position: {
                        top: 10,
                        right: 10
                    }
                }
            });
 
            myMap.controls.add(zoomControl);
        }

<title>Добавление кнопок zoom на Яндекс Карту</title> #map { width: 100%; height: 400px; } <div id="map"></div> ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 10 }); var zoomControl = new ymaps.control.ZoomControl({ options: { size: "small", position: { top: 10, right: 10 } } }); myMap.controls.add(zoomControl); }

Замените `YOUR_API_KEY` на ваш собственный API ключ Яндекс Карт. В этом коде мы создаем карту с центром в координатах `[55.76, 37.64]` и зумом `10`. Затем мы создаем элемент управления `ZoomControl` и добавляем его на карту.

Вы можете настроить параметры кнопок zoom, такие как размер и позиция на карте, в соответствии с вашими потребностями. Надеюсь, это поможет вам добавить кнопки zoom на Яндекс Карту.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов