Блог

Главная - Вопросы по программированию - Здесь API карт не отображается в режиме начальной загрузки 5

Здесь API карт не отображается в режиме начальной загрузки 5

#javascript #here-api

Вопрос:

У меня возникли проблемы с отображением карты в режиме boostrap 5. Это работает вне модальности. Внутри модального отображаются слои по умолчанию, но не сама карта. Моя функция js

 function loadMap(zoom, lat, lng) {
  var mapContainer = document.createElement('div');
  mapContainer.style.height = '300px';
  mapContainer.style.width = '600px';
  document.getElementById('mapInsideModal').appendChild(mapContainer);
   
  var defaultLayers = platform.createDefaultLayers();

  // Instantiate the map:
  var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
    zoom: zoom,  center: {   lng: lng,  lat: lat,},
  });
  // add a resize listener to make sure that the map occupies the whole container
  window.addEventListener('resize', function () {map.getViewPort().resize();});
  // Create the default UI:
  var ui = H.ui.UI.createDefault(map, defaultLayers);
  
}

Я создал идентификатор <div id="mapInsideModal"></div> в модальном html начальной загрузки, в котором я хочу отобразить карту.

Комментарии:

1. Где это platform определено? Проходите ли вы apiKey при создании platform ?

Ответ №1:

По умолчанию отображается document.getElementById («mapInsideModal»): нет, поэтому объект карты не инициализирован должным образом.

Сначала создайте mapContainer в стиле css, например «позиция: абсолютная; слева: -99999 пикселей;»

 var mapContainer = document.createElement('div');
mapContainer.style.position = "absolute";
mapContainer.style.left = "-99999px";

Добавьте элемент mapContainer в элемент тела.

Ваша карта не будет отображаться, поэтому вам нужно сделать это document.getElementById('mapInsideModal').appendChild(mapContainer); и установить css стиля left: 0px; для элемента mapContainer внутри shown.bs.modal события — см. Пожалуйста, внизу страницы https://getbootstrap.com/docs/5.1/components/modal/

showed.bs.modal — Это событие запускается, когда модал становится видимым для пользователя (будет ждать завершения CSS-переходов). Если это вызвано щелчком, элемент, по которому был сделан щелчок, доступен как свойство relatedTarget события.

Метки: