Question

我在页面加载后运行此功能但没有显示地图，只有一个带有谷歌徽标和底部使用条款按钮的灰色方块：

initMap() {
    var area = new google.maps.LatLngBounds(
        new google.maps.LatLng(-47.746617, 165.346753),
        new google.maps.LatLng(-33.670946, -179.667808)
    );


    var options = {
        bounds: area,
    zoom: 13
    };
    //this.autocomplete = new google.maps.places.Autocomplete(<HTMLInputElement>this.areaInput.areaInput.nativeElement, options);



       var  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13
});
google.maps.event.trigger(map, "resize");

}

HTML：

<div id="map"></div>

的CSS：

#map {
        height: 300px;
        overflow: visible;
        width:100%
    }

    #map * {
        overflow: visible;
    }

为什么地图只是一个灰色方块？

编辑 - 当我调整窗口大小时，会显示地图。这是为什么？

如何在不需要调整窗口大小的情况下显示它？

地图位于自举模式上。用户必须单击某些内容才能显示模态。地图显示但是灰色，没有实际地图，直到用鼠标手动调整窗口大小。

编辑：这与时间有关。如果我勾选一个按钮来调整地图的大小，则单击该按钮时它会起作用。

Answer 1

div（#map）中有错误，您应该为div设置合适的大小

print("It is not there.")

您错过了<div id="map" style='width: 400px; height: 400px;'></div>

Answer 2

也许有人可以在将近一年后从这个答案中受益:)。我有同样的问题，我这样解决了：在initMap函数中，我触发了resize

this.editForm.patchValue({
                            'specificKey': {
                                date: {

Answer 3

结束是因为它是在自举模式上。需要挂钩到“显示”的bootstrap模态生命周期事件，以确保它已完全加载。不期待模态成为一个因素，因为我在过去没有问题的情况下在模态上完成了它。

$('#result-details-modal').on('shown.bs.modal', (e) => {
    this.resizeMap();
})

resizeMap() {
    var map = new google.maps.Map(document.getElementById('map'), this.options);
    google.maps.event.trigger(map, "resize");
}

Bootstrap Modal上的Google Map是灰色的 - 调整窗口大小使其显示

3 个答案: