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

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

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

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

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

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