谷歌地圖模式問題

Question

我試圖將谷歌地圖顯示到Twitter引導模式。 當用戶第一次點擊按鈕Show map他能夠成功地看到地圖，因為我正在生成地圖onclick()函數，但是當他關閉模態並重新打開它時，地圖不能正確顯示地圖的90％部分像下面一樣變灰

我甚至嘗試這個解決方法，刪除地圖綁定並重新生成它的整個div，但這個技巧不太好用，讓我知道如何解決我的問題。

以下是我的js函數，我正在調用show map的事件

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

請幫助，

謝謝

Answer 1

我遇到過同樣的問題。 但我發現了模態顯示事件的問題。 因為它沒有使用某些版本的問題所以我只是按照引導模式文檔來實現它。

Bootstrap模態映射問題解決方案：

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

最后這對我有用，對某人有幫助。

Answer 2

我正在使用Angular，對我來說， ui.bootstrap.collapse AngularUI指令對我有用，就是使用超時。 此指令與模態具有相同的問題，因為在新視圖完全加載之前未定義地圖大小，並且地圖顯示為灰色區域。 我所做的是將此代碼添加到打開折疊內容的按鈕。 也許您可以使用打開模態的按鈕使其適應您的情況。

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

希望能幫助到你。

Answer 3

如果您使用的是bootstrap 3，則必須執行以下操作：

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

還要確保沒有為img - tags設置任何max-width或max-height值。 如果您在css樣式表中這樣做，請將其放在最后：

#map img{
    max-width:none;
    max-height:none;
}

我不確定是否有必要但是為持有地圖的div設置高度值應該是一件好事：

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

我從幾個stackoverflow討論中匯總了這個。

Answer 4

由於您要在未定義的寬度元素中加載地圖，因此您可以使用此解決方案。

在使用latlong初始化地圖后，您應該在google.maps上觸發resize事件

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})

Answer 5

如果您使用的是Angular，則應使用$ timeout而不是setTimeout 。 將$ timeout設置為0的函數包裝將確保在當前執行上下文完成后執行包裝函數。 在您的情況下，Google Maps API將僅在模態后重新繪制地圖，並且完全呈現包含地圖的元素。 你不會看到任何灰色區域。

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

Answer 6

visibility:hidden和visibility:visible可用於代替display:none和display:block 。 這對我有用。 您甚至可以為此編輯模態的CSS。

Answer 7

由於user1012181的答案，我解決了這個問題。 我個人也喜歡這個純CSS解決方案。

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

Answer 8

我也遇到了這個問題並提出了這個簡單的解決方案。

等到模態完全加載，然后在map函數上設置timeOut事件。

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

我非常肯定它會在所有情況下都能解決。

Answer 9

我將使用uiGmapIsReady等待dom准備然后強制地圖調整大小：

 uiGmapIsReady.promise().then(function () { var map = $scope.map.control.getGMap(); google.maps.event.trigger(map, 'resize'); }); 

Answer 10

這就是上面的答案如何幫助，但我不得不使用onclick調用主函數。

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

function showMap（）{

//your map function

}

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

顯示地圖（）; }