代码之家 › 专栏 › 技术社区 › Valuator

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

devextreme asp.net-core google-maps-api-3 javascript

-2

Valuator · 技术社区 · 8 年前

我正在一个DevExtreme弹出窗口中显示一个谷歌地图(使用引导)。地图作为ASP的内容返回。NET核心视图组件。

地图占据了整个div(谷歌徽标、控件等),但实际地图数据本身没有。它占据的区域较小,其他地方只有灰色:

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

以下是创建地图的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') 事件,但它没有帮助。

2 回复 | 直到 8 年前

MrUpsidown 8 年前

在上触发贴图调整大小 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');
  }
});

Valuator 8 年前

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

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

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

推荐文章

Jason Steve · HTML5地理位置信息窗口不工作

8 年前

Drew LeSueur · 谷歌地图JavaScript街景错误

8 年前

Valachio · Google Maps API-向数据层中的点添加任意数据

8 年前

samvdst · Google Maps JavaScript API V3-显示多条路线[重复]

8 年前

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

8 年前

Andy · 如何在Google Maps API上禁用箭头键平移

8 年前

Bhumesh Purohit · 受限Google API密钥在反向地理编码中不起作用

8 年前

Mizlul · 我可以在我的项目中使用并在ios和android上工作的最可靠的react本机地图库是什么

8 年前

jemz · 自定义图像图标未定位

8 年前

CodingGrandma · 仅打开一种地图类型的Google Fusion表/删除某些地图类型的Google Fusion表

8 年前