10

Google マップを Twitter ブートストラップ モーダルに表示しようとしています。ユーザーが最初にボタンをクリックするとShow map、マップonclick()関数を生成しているため、マップを正常に表示できますが、モーダルを閉じて再度開くと、マップが正しく表示されず、マップの 90% の部分が次のように灰色になります

ここに画像の説明を入力

マップがバインドされている div 全体を削除して再生成するこの回避策も試してみましたが、そのトリックはうまくいきません。問題を解決する方法を教えてください。

以下は、ショーマップのonclickイベントを呼び出している私のjs関数です

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


}

親切に助けて、

ありがとう

4

10 に答える 10

5

同じ問題がありました。しかし、モーダル表示イベントに問題が見つかりました。一部のバージョンの問題では機能しないため、ブートストラップのモーダルドキュメントに従ってそれを達成します。

ブートストラップ モーダル マップの問題の解決策:

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

最後に、これは私にとってはうまくいきます。誰かに役立つ可能性があります。

于 2014-11-28T11:33:29.993 に答える
4

私はAngularで作業していますが、ui.bootstrap.collapse AngularUIディレクティブでタイムアウトを使用することでうまくいきました。このディレクティブにはモーダルと同じ問題があります。これは、新しいビューが完全に読み込まれるまでマップ サイズが定義されず、マップが灰色のゾーンで表示されるためです。私が行ったことは、折りたたまれたコンテンツを開くボタンにこのコードを追加することです。モーダルを開くボタンを使用して、ケースに適応させることができるかもしれません。

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

それが役に立てば幸い。

于 2014-08-07T19:21:21.173 に答える
1

Angular を使用している場合は、 setTimeoutの代わりに$timeoutを使用する必要があります。$timeout を 0 に設定して関数をラップすると、現在の実行コンテキストが終了した後にラップされた関数が実行されることが保証されます。あなたの状況では、Google Maps API は、モーダルと地図を保持する要素が完全にレンダリングされた後にのみ地図を再描画します。灰色の領域は表示されません。

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);
于 2014-10-16T09:51:02.913 に答える
1

visibility:hiddenandの代わりにand をvisibility:visible使用できます。これは私にとってはうまくいきました。このためにモーダルの CSS を編集することもできます。display:nonedisplay:block

于 2014-12-16T22:21:52.933 に答える
1

user1012181 の回答のおかげで、この問題を解決しました。個人的には、この純粋な CSS ソリューションも気に入っています。

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

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}
于 2016-03-01T18:53:03.970 に答える
0

uiGmapIsReady を使用して dom の準備が整うのを待ってから、マップのサイズを強制的に変更します。

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

于 2016-07-14T04:15:12.103 に答える