地图数据在平移或移动之前不会填满整个地图元素

Question

我在 DevExtreme 弹出窗口中显示 Google 地图（使用 Bootstrap）。地图作为 ASP.NET 核心视图组件的内容返回。

地图占据了整个 div（Google 徽标、控件等），但实际地图数据本身没有。它占用的面积较小，其他地方只有灰色：

现在，只要我对地图进行任何操作 - 稍微平移、放大、缩小，地图就会占据整个元素：

这是创建地图的 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>

以及检索 ViewComponent 并将内容放入弹出窗口的 AJAX 函数：

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') 事件，但没有帮助。

Answer 1

在弹出窗口的 shown 事件中触发地图调整大小。

见Events and 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');
  }
});

Answer 2

我最终将地图创建包装在一个函数中：

<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();
    }
});

模式打开和地图显示时会有轻微延迟，因为它直到那时才被创建，但至少它现在填满了整个元素。

地图数据在平移或移动之前不会填满整个地图元素

Map data not filling entire map element until panned or moved

javascript

google-maps-api-3

devextreme

asp.net-core