这里映射javascript模式窗口中的API

我正在我的服务中使用heremapsapi。但我有个问题。地图不会显示在我的弹出窗口中。有地图块正在加载，但地图画布未加载。 显示所有配置元素，但不显示地图地形

这是我的js：

$(function () {
    if (!companyID) {
        return;
    }

    var platform = new H.service.Platform({
        'app_id' : [my_here_app_id],
        'app_code' : [my_here_app_code]
    });

    var coordinates = {
        lat: 45,
        lng: 45
    };

    map = new H.Map(document.getElementById('mapContainer'),
        platform.createDefaultLayers().normal.map, {
            center: coordinates,
            zoom: 15
        });
});

这段代码是我在模态窗口html模板中使用的。没有错误。如果我在没有弹出窗口的情况下使用这个代码，它就可以工作了。我尝试使用：

map.getViewPort().resize(); 

，但这没有帮助。 有人知道怎么修吗

我的html：

<div class="dialog-window js-edit-field-window" style="width: 780px; margin-left: -400px; margin-top: 50px; display: block;">
<div class="dialog clear-basket">
    <form action="http://local.misteram.com.ua/order/621/update-user-address" class="js-window-form" method="POST">
        <div class="title">Редактирование адрес клиента</div>
        <div class="content"><style>
            .user-address-text-field {
                margin: 0 5px;
            }
        </style>

            <div class="js-user-data-form" data-order-id="621">

                <div id="mapContainer" style="width: 740px; height: 200px; border: 1px solid rgb(27, 198, 227); position: relative; overflow: hidden;"></div>

            </div>
        </div>
        <div class="buttons">
            <input type="submit" value="Сохранить" class="confirm btn js-edit-window-button-submit">
            <div class="edit-field-ajax-loader">
                <img src="http://local.misteram.com.ua/images/checkout_loading.gif">
            </div>
            <input type="button" value="Закрыть" class="close btn js-edit-window-button-cancel js-close-edit-field-window">
        </div>
    </form>
</div>
<div class="ngdialog-close"></div>

Редактирование адрес клиента
.用户地址文本字段{
利润率：0.5px；
}

---

由于您提到上述代码在模式弹出窗口之外工作，因此当模式的HTML尚未添加到DOM时，很可能过早调用用于实例化映射的代码

用于实例化映射的代码位于

$

函数中，假设您使用的是jQuery，这意味着文档准备好后，该代码将立即运行。 但是，此事件是在用户打开模式之前触发的。虽然代码可以在模式文件中定义，但加载该文件后会立即调用

$

函数

简言之：

• 确保在容器
  元素添加到DOM后调用映射实例化代码
• 确保您在

  new H.Map（…）

  行中使用的id与model的html中的id匹配，如用户stdob所述

---

最后，这不是问题的原因，但值得一提的是，当您配置平台对象时，请确保添加

useHTTPS:true

，否则当您将通过HTTPS部署应用程序时，地图块将不会加载。

您可以尝试在调整大小时设置超时，此时查看端口似乎未完全初始化

setTimeout（函数（）{
map.getViewPort（）.resize（）
}, 100);好吧，我有点晚了，但我会为其他人回答这个问题

将地图实例化和显示的所有javascript代码放在一个方法中
像这样

然后，当您希望显示地图时

loadMap()
 window.addEventListener('resize', function () {
          // For the Modal
        map.getViewPort().resize(); 
        });

希望这有帮助
模态窗口示例如何？我编辑了代码。地图html模板中的div具有id=
map\u canvas
，但在javascript代码中使用id=
mapContainer
？这是示例中的错误。我修好了。这不会有帮助：（我添加了useHTTPS:true，还添加了
console.log（document.getElementById（'mapContainer'））
在地图初始化之前，它正在浏览器控制台中记录div元素。据我所知，它现在已经呈现了。但是地图画布仍然没有显示。这可能是css的问题。是否可以在弹出窗口中添加
mapContainer
块呈现方式的图片？如果添加行
var ui=H.ui.ui.createDefault（map，defaultLayers）；
，如果您加载了
mapsjs ui.js
，您会看到一些用于缩放的贴图控件吗？还是只看到自己的带有1px边框的mapContainer块？顺便问一下，调用
map.getViewPort（）.resize（）
使映射画布调整到容器的大小，通常添加到窗口调整大小事件的侦听器中，如下所示：
window.addEventListener（'resize'，function（）{map.getViewPort（）.resize（）；}）；
loadMap()
 window.addEventListener('resize', function () {
          // For the Modal
        map.getViewPort().resize(); 
        });