我在我的服务中使用HERE maps API。但我有一个问题。地图不会显示在我的弹出式窗口中。有地图块正在加载,但地图画布没有。显示所有配置元素,但不映射地形。
在这里我的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>
您可以尝试在调整大小时设置超时,此时视图端口似乎尚未完全初始化
setTimeout(function () {
map.getViewPort().resize()
}, 100);
希望这会有所帮助!
由于您提到上述代码在模式弹出窗口之外工作,因此当模态的HTML尚未添加到DOM时,很可能过早地调用实例化映射的代码。
用于实例化地图的代码位于$
函数内,假设您使用的是jQuery,则表示此代码将在文档准备就绪后立即运行。但是,在用户打开模态之前会触发此事件。虽然可以在模态文件中定义代码,但只要加载该文件,就会调用$
函数。
简而言之:
<div>
元素添加到DOM之后调用映射实例化代码new H.Map(...)
行中使用的id与模式的html中的id匹配,如用户stdob所述最后,不是这个问题的原因,但值得一提,确保在配置平台对象时添加useHTTPS: true
,或者在通过HTTPS部署应用程序时不会加载地图图块。