这里在 javascript 模型 window 中映射 API

Question

我在服务中使用 HERE 地图 API。但我有一个问题。地图未显示在我的弹出窗口中。有地图块正在加载，但地图 canvas 没有。所有配置元素都在显示，但地图地形没有显示。

这是我的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
        });
});

我在模态 window 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>

Answer 1

既然你提到上面的代码在模态弹出窗口之外工作，很可能是实例化地图的代码被调用得太早，当模态的 HTML 还没有添加到DOM.

实例化地图的代码在 $ 函数内，假设您正在使用 jQuery，这意味着一旦文档准备好，此代码将运行 . 但是，在用户打开模式之前会触发此事件。虽然代码可能在模态文件中定义，但 $ 函数会在该文件加载后立即被调用。

简而言之：

确保在容器 <div> 元素添加到 DOM

确保您在行 new H.Map(...) 中使用的 ID 与模式 html 中的 ID 相匹配，正如用户 stdob 提到的那样

最后，不是这个问题的原因但值得一提的是，确保在配置平台对象时添加 useHTTPS: true，否则当您通过 HTTPS 部署应用程序时地图图块将不会加载。

Answer 2

您可以尝试设置调整大小的超时时间，目前看来视口还没有完全初始化

setTimeout(function () {
    map.getViewPort().resize()
}, 100);

希望这会有所帮助！

Answer 3

好吧，我来晚了一点，但我会回答其他人的问题

将您所有的 javascript 代码用于地图实例化并显示在一个方法中像这样

function loadMap() {
........
}

然后当您希望显示地图时

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

希望对您有所帮助

这里在 javascript 模型 window 中映射 API

Here maps API in javascript modal window

javascript

here-api