javascript - 这里在javascript模式窗口中映射API
问题描述
我在我的服务中使用 HERE 地图 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>
解决方案
由于您提到上述代码在模态弹出窗口之外工作,因此很可能在模态的 HTML 尚未添加到 DOM 时调用实例化地图的代码过早。
用于实例化地图的代码在$
函数内部,假设您使用的是 jQuery,这意味着该代码将在文档准备好后立即运行。但是,在用户打开模式之前会触发此事件。虽然代码可以在模态文件中定义,但一旦加载该文件,就会调用$
该函数。
简而言之:
- 确保在将容器元素添加到 DOM后调用地图实例化代码
<div>
- 确保您在该行中使用
new H.Map(...)
的 id 与模态的 html 中的 id 匹配,正如用户 stdob 提到的
最后,不是这个问题的原因,但值得一提的是,确保useHTTPS: true
在配置平台对象时添加,否则当您通过 HTTPS 部署应用程序时,地图图块将不会加载。
推荐阅读
- fuzzing - 用于磁盘解析的 Libfuzzer 目标
- c - Pass a pointer to struct and a int to a function in C to implement a stack
- c# - 在启用自动生成主键的情况下,如何在 DbContext 的“OnModelCreating”方法期间播种主数据?
- python - Chrome 浏览器上的 Selenium Python 自动化
- laravel - 嗨,我现在如何使用下拉菜单 - LARAVEL 将数据(如广告)插入到这个嵌套集模型中?
- python - 尽管守护进程设置为 True,但 Python 线程并没有停止
- ios - Firebase Observer Event Type
- https - HTTPS 请求重启 NodeMCU
- android-studio - 实现 google playservice 时应用程序崩溃
- amazon-web-services - 在 Web 界面中编辑时 AWS S3 存储桶策略“拒绝访问”