Отображение карты на сайте(yandex-map)

Рейтинг: 1Ответов: 2Опубликовано: 15.03.2023

Мне нужно добавить карту с разным функционалом на сайт.Я взял ключ апи в яндексе(сервис «JavaScript API и HTTP Геокодер»).Взял хтмл код из документации

<html>
  <head>
    <title>Быстрый старт. Размещение интерактивной карты на странице</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/3.0/?apikey=(апи ключ мой)&lang=ru_RU"></script>
    <script>
      ymaps3.ready.then(init);
      function init() {
      const map = new ymaps3.YMap(document.getElementById('YMapsID'), {
  location: {
    center: [37.64, 55.76],
    zoom: 10
  }
});
      }
    </script>
  </head>

  <body>
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

Я вставил данный код на сайт,после чего ничего не отображалось,в поддержке ответили чтобы для отображения карты нужно добавить еще слои,так как я не самый шарящий человек в коде и в документации не нашел куда именно вставлять и как правильно.Так вот может кто знает как решить мою проблему,и как добиться результатат отображения карты на сайте.

yandex-maps-jsapi
Источник: Stack Overflow на русском

Ответы

▲ 1

Слой с подложкой следует добавлять в тело функции init(), которая у вас в блоке <script>. Минимальный вид скрипта для отображения карты будет выглядеть так:

ymaps3.ready.then(init);
function init() {
    const map = new ymaps3.YMap(document.getElementById('YMapsID'), {
        location: {
            center: [37.64, 55.76],
            zoom: 10
        }
    });
    
     const layer = new ymaps3.YMapDefaultSchemeLayer();
     map.addChild(layer);  
}

Но если с подгонкой скриптов по инструкции под свой сценарий есть сложности, быть может лучше получать готовый код из Конструктора или через кнопку Поделиться на карте?

▲ 1

Не знаю почему этого нет в разделе "Руководство по переходу", и это действительно сбивает с толку, сам на этом потерял кучу времени, когда переходил с 2 на 3, но в разделе "Быстрый старт" это есть, ymaps3.YMap(...) создает только контейнер, далее в руководстве сказано, что для отображения карты нужно создать слои, у "YaCor" в ответе добавление слоя есть, но он не заострил на этом внимание:

 const layer = new ymaps3.YMapDefaultSchemeLayer();
 map.addChild(layer);