以模式打开现有的 HERE 地图

Question

我希望以模式打开现有的 HERE 地图 - 放大并放大。

当我在同一个 'map' 元素中内联执行此操作时，它工作正常。

例如：比方说 $('#map') 包含我的地图。

<!-- HTML: -->
<!--My modal has an element that the map should be copied into -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div id="map-zoomed">MAP!</div>
      </div>
    </div>
  </div>

<div id="map">Initial Rendered here in a small container of fixed width/height</div>
<button type="button" class="btn btn-primary">Open Larger Map</button>
 <div id="map-zoomed-inline">Inline map - same issue</div>

// My JS:
$('.btn').click(event => {            
           $('#myLargeModalLabel').modal('hide');
            // Ideally would have set the #map-zoomed element, but I do this instead: 
           $('#map').attr('style','width: 100vw; height: 100vh');
            map.setZoom(map.getZoom() + 0.5, true);
            map.getViewPort().resize();
            // the original map element shows the updated map just fine.

            
            let newMap = $('#map').clone();
            // $('#map-zoomed-inline').html(newMap);  // Did this outside a modal, and have the same issue.

            $('#map-zoomed').html(newMap);  // This works, but the map needs to be 'resized' here - how?
            $('#map').hide();
            $('#myLargeModalLabel').modal('show');  // How to ensure the modal shows the entire map without cropping it out?
        
  });

Answer 1

当您想在某个新的 html 元素容器中显示地图时，您需要总是来初始化一个新的地图对象，如以下代码片段所示：

// set up containers for the map

var mapContainer = document.createElement('div');
var staticMapContainer = document.createElement('div');

mapContainer.style.height = '300px';

staticMapContainer.style.position = 'absolute';
staticMapContainer.style.width = '600px';
staticMapContainer.style.height = '300px';

document.getElementById('map').appendChild(mapContainer);
document.getElementById('panel').appendChild(staticMapContainer);

// initialize a map, this map is interactive
var map = new H.Map(mapContainer,
  defaultLayers.vector.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// initialize a map that will be synchronised
var staticMap = new H.Map(staticMapContainer,
  defaultLayersSync.vector.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1
});

上面例子的完整代码请见https://developer.here.com/documentation/examples/maps-js/maps/synchronising-two-maps

克隆地图容器元素或类似的Dom操作将不起作用。

以模式打开现有的 HERE 地图

Open existing HERE Map zoomed, in modal

javascript

here-api

bootstrap-modal