Я использую 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>
Я редактировал код.
Div в шаблоне html для карты имеет id = map_canvas
, но в коде javascript вы используете id = mapContainer
?
Это ошибка в примере. Я исправил. Не поможет :(
Поскольку вы упомянули, что приведенный выше код работал вне модального всплывающего окна, весьма вероятно, что код для создания экземпляра карты вызывается слишком рано, когда HTML-код модального окна еще не добавлен в DOM.
Код для создания экземпляра карты находится внутри функции $
, что, если вы используете jQuery, означает, что этот код будет запущен, как только документ будет готов.
Однако это событие запускается до того, как пользователь откроет модальное окно. Хотя код может быть определен в файле модального окна, функция $
- призванный, как только этот файл загружается.
Суммируя:
<div>
добавлен в DOMnew H.Map(...)
, соответствует идентификатору в html модального окна, как упомянул пользователь stdobНаконец, это не причина этой проблемы, но стоит упомянуть, что обязательно добавьте useHTTPS: true
при настройке объекта платформы, иначе фрагменты карты не будут загружаться при развертывании приложения через HTTPS.
Я добавляю useHTTPS: true, также я добавил console.info(document.getElementById('mapContainer'));
перед инициализацией карты, он регистрирует элемент div в консоли браузера. Насколько я понял, на данный момент он уже отрендерен. Но холст карты все еще не отображается
Это может быть проблема css. Можно во всплывающем окне добавить картинку, как рендерится блок mapContainer
? Если вы добавите строку var ui = H.ui.UI.createDefault(map, defaultLayers);
, при условии, что вы загрузили mapsjs-ui.js
, вы увидите некоторые элементы управления картой для масштабирования? Или вы видите только свой собственный блок mapContainer с рамкой в 1 пиксель?
Между прочим, вызов map.getViewPort().resize();
, который заставляет холст карты изменять размер контейнера в соответствии с размером контейнера, обычно добавляется в прослушиватель для события изменения размера окна, как показано ниже: window.addEventListener('resize', function () { map.getViewPort().resize(); });
Вы можете попробовать установить тайм-аут при изменении размера, кажется, что порт просмотра не полностью инициализирован на данный момент
setTimeout(function () {
map.getViewPort().resize()
}, 100);
Надеюсь, это поможет!
Хорошо, я немного опоздал, но я отвечу на вопрос за других
поместите весь свой код javascript для создания экземпляра карты и отображения в методе вот так
function loadMap() {
........
}
А затем, когда вы хотите, чтобы карта отображалась,
loadMap()
window.addEventListener('resize', function () {
// For the Modal
map.getViewPort().resize();
});
Надеюсь это поможет
А как насчет примера модального окна?