Данные карты не заполняют весь элемент карты, пока они не будут перемещены или сдвинуты - PullRequest
Новая
       10

Данные карты не заполняют весь элемент карты, пока они не будут перемещены или сдвинуты

0 голосов
/ 10 мая 2018

Я отображаю карту Google во всплывающем окне DevExtreme (использует Bootstrap).Карта возвращается в виде содержимого компонента ASP.NET Core View.

Карта занимает весь элемент div (логотип Google, элементы управления и т. Д.), Но сами фактические данные карты - нет.Он занимает меньшую область и просто имеет серый цвет в другом месте:

enter image description here

Теперь, как только я что-то сделаю с картой - слегка сдвиньте ее, увеличьтепри уменьшении масштаба карта занимает весь элемент:

enter image description here

Вот содержимое ViewComponent, которое создает карту: 

<script>
var propertyMap = new google.maps.Map(document.getElementById('mapContainer'), {
    zoom: 10,
    center: { lat: 40.71, lng: -74.01 },
    mapTypeId: google.maps.MapTypeId.HYBRID
});
</script>

<div id="mapContainer" style="width: 100%; height: 100%;"></div>

И функция AJAX, которая извлекает ViewComponent и помещает содержимое во всплывающее окно: 

var mapPopup = $("<div />").appendTo($("body")).dxPopup({
width: 930,
height: 650,
visible: false,
closeOnOutsideClick: true
});

function showMapPopup() {
$.ajax({
    type: "POST",
    url: "/Maps/PropertyMap",
}).done(function (data) {
    mapPopup.dxPopup({
        contentTemplate: data
    });
    mapPopup.dxPopup("instance").show();
    google.maps.event.trigger(propertyMap, 'resize');
});
}

Я попытался добавить событие google.maps.event.trigger(propertyMap, 'resize') после показа всплывающего окна на основе более старого, похожего вопроса, но это не такничем не помог.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Я закончил оборачивать создание карты в функцию: 

<script>
function createMap() {
    var propertyMap = new google.maps.Map(document.getElementById('mapContainer'), {
        zoom: 10,
        center: { lat: 40.71, lng: -74.01 },
        mapTypeId: google.maps.MapTypeId.HYBRID
    });
}
</script>

<div id="mapContainer" style="width: 100%; height: 100%;"></div>

И затем не вызывал ее, пока не будет отображено модальное значение: 

var mapPopup = $("<div />").appendTo($("body")).dxPopup({
    width: 930,
    height: 650,
    visible: false,
    closeOnOutsideClick: true,
    onShown: function() {
        createMap();
    }
});

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

0 голосов
/ 10 мая 2018

Запустить изменение размера карты при всплывающем событии shown.

См. События и Показано .

Что-то вроде: 

var popupOptions = {

    // [...] Other options here

    onShown: function() {

      google.maps.event.trigger(propertyMap, 'resize');
    }
};

И используйте эти параметры при создании своего всплывающего экземпляра.

В соответствии с кодом, который вы разместили, я полагаю, это должно работать: 

var mapPopup = $("<div />").appendTo($("body")).dxPopup({
  width: 930,
  height: 650,
  visible: false,
  closeOnOutsideClick: true,
  onShown: function() {
    google.maps.event.trigger(propertyMap, 'resize');
  }
});
...