Javascript 引导模式上的谷歌地图是灰色的-调整窗口大小使其显示

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

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");

}

为什么地图只是一个灰色的正方形

编辑-调整窗口大小时，将显示贴图。为什么会这样？

如何在不调整窗口大小的情况下使其显示

地图位于引导模式上。用户必须单击某些内容才能显示模式。地图显示为灰色，但在使用鼠标手动调整窗口大小之前，没有实际的地图

---

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

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

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

---

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

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

---

结果是因为它在引导模式上。需要挂接到引导模式生命周期事件“Showed”中，以确保它已完全加载。我不希望模态成为一个因素，因为我过去在模态上做过，没有问题

$('#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");
}

---

结果是因为它在引导模式上。需要挂接到引导模式生命周期事件“Showed”中，以确保它已完全加载。我不希望模态成为一个因素，因为我过去在模态上做过，没有问题

$('#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");
}

---

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

    function initMap() {
    var myCenter = new google.maps.LatLng(20.296100, 85.824500);
    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);

    $('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapProp.center);
    });
};

---

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

    function initMap() {
    var myCenter = new google.maps.LatLng(20.296100, 85.824500);
    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);

    $('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapProp.center);
    });
};

---

浏览器控制台中是否有错误？为什么你的

div

HTML代码中有

#map

。。你能替换google.maps.event.trigger（map，“resize”）；这一行与google.maps.event.addDomListener（窗口，“加载”，initMap）@MostafaBaezid谢谢，但它不起作用。您在浏览器控制台中有一些错误吗？为什么你的

div

HTML代码中有

#map

。。你能替换google.maps.event.trigger（map，“resize”）；这行与google.maps.event.addDomListener（窗口，“加载”，initMap）@MostafaBaezid谢谢，但它不起作用。我只是从问题中删除了#map。这是一个角度2的东西。我的地图已经有高度和宽度。如果浏览器控制台中没有错误。。然后显示与此页面相关的html和css代码。抱歉，完成。新发现。当我调整窗口大小时，将显示地图。地图在页面加载时可见，或者是在页面加载后单击的选项卡。。。我也更新了答案（有点错误）谢谢。对您答案的更新无效。地图位于引导模式上。用户必须单击某些内容才能显示模式。地图显示为灰色，但在用鼠标手动调整窗口大小之前没有实际地图。我刚刚从问题中删除了#地图。这是一个角度2的东西。我的地图已经有高度和宽度。如果浏览器控制台中没有错误。。然后显示与此页面相关的html和css代码。抱歉，完成。新发现。当我调整窗口大小时，将显示地图。地图在页面加载时可见，或者是在页面加载后单击的选项卡。。。我也更新了答案（有点错误）谢谢。对您答案的更新无效。地图位于引导模式上。用户必须单击某些内容才能显示模式。地图显示为灰色，但在使用鼠标手动调整窗口大小之前，没有实际的地图。