Блог

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

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

Мой код в jsfiddlehttps://jsfiddle.net/Lymbzfx2 /

Мой HTML

 <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <div id="map" class="chart"></div> <!-- Map should be here -->
  </div>
</div>
  

Мой JS-код

 var platform = new H.service.Platform({
    'app_id': '{App_ID}',
    'app_code': '{APP_Code}'
});

  // Obtain the default map types from the platform object:   
var defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.normal.map, {
    zoom: 10,
    center: {
      lat: 52.5,
      lng: 13.4
    }
});
  

Я ожидаю, что карта будет показана после того, как я нажму ссылку «Link with href». Однако некоторые SVG-файлы из Here Maps отображаются, а фрагменты карты не загружены

Редактировать: добавлен скриншот текущего состоянияhttps://i.imgur.com/6WuV4gm.png (Отсутствует репутация для публикации изображения)

Холст карты HERE динамически принимает ширину и высоту своего родительского div (в данном случае: <div id="map" class="chart"></div> ).

Итак, сначала вам нужно добавить width и height в раздел map div вот так:

<div id="map" style="width:100%; height:400px" class="chart"></div> .

Во-вторых, вы должны отметить, что дочерние элементы внутри сворачиваемого элемента начальной загрузки будут иметь ширину и высоту, равные нулю, при сворачивании ( display: none ) и их фактические значения при развертывании ( display: block ).

Таким образом, ЗДЕСЬ карта должна быть нарисована, когда сворачиваемый элемент развернут (чтобы карта могла иметь ненулевые ширину и высоту). Вы можете использовать jQuery, чтобы проверить, нажата ли ваша кнопка / ссылка и виден ли раздел «карта».