Здесь карты API в модальном окне JavaScript - PullRequest
Новая
       8

Здесь карты API в модальном окне JavaScript

0 голосов
/ 05 сентября 2018

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Вы можете попытаться установить тайм-аут при изменении размера, похоже, что порт просмотра в данный момент не полностью инициализирован 

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

Надеюсь, это поможет!

0 голосов
/ 05 сентября 2018

Поскольку вы упомянули, что приведенный выше код работал вне модального всплывающего окна, весьма вероятно, что код создания экземпляра карты вызывается слишком рано, когда HTML-код модального еще не добавлен в DOM.

Код для создания экземпляра карты находится внутри функции $, которая, если вы используете jQuery, означает, что этот код будет запущен, как только документ будет готов. Однако это событие вызывается до того, как пользователь открыл модальное окно. Хотя код может быть определен в файле модального режима, функция $ вызывает , вызывается , как только этот файл загружается.

Короче говоря:

  • убедитесь, что вы вызвали код создания карты после контейнер <div> элемент добавлен в DOM
  • убедитесь, что идентификатор, который вы используете в строке new H.Map(...), совпадает с идентификатором в html модального окна, как упомянул пользовательский stdob

Наконец, не причина этой проблемы, но стоит упомянуть, обязательно добавьте useHTTPS: true при настройке объекта платформы, иначе плитки карты не будут загружаться при развертывании приложения по HTTPS.

...