8

私は自分のアプリに（モーダルで）Googleマップを実装しましたが、下の画像でわかるように、もちろん削除したい灰色の領域があります。灰色の領域が消えるようにマップを移動することは可能ですが、それは必要ありません。

マップはモーダルボックス内に表示されます。このボックスには、モーダルを表示するためのボタンがクリックされたときに動的に作成される多くのコンテンツが含まれています。モーダルがロードされる前にマップコンテンツが完全にロードされていないことが問題のようですが、よくわかりません...

html：

    ...
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Test</h3>
    </div>
    <div id="modal-left" class="modal-body left"></div>
    <div class="modal-body right">
      <div id="map"></div>
    </div>
  </div>
    ...

js：

    function initializeMap(latitude, longitude) {
        var place = new google.maps.LatLng (latitude, longitude);

        var myOptions = {
            zoom: 10,
            center: place,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

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

        var marker = new google.maps.Marker({
            position: place,
            map: map,
            title: ""
        });
    };

    $('.modal-btn').click(function(){
        var producerId = $(this).attr('id');

        GetProducer(producerId, function(data) {  // <--- data retrieved through ajax
            initializeMap(data.latitude, data.longitude);

            var titel = data.name;

            var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" +
                        "<p>" + data.name + ", " + data.address + "<br/>" +
                        data.zipcode + " " + data.town + "</p>" +
                        "<p><a href='" + data.url + "' >" + data.url + "</a></p>";

            $('#myModalLabel').html(titel);
            $('#modal-left').html(content);
        });
    });

画像1：

画像2：

4

4 に答える 4

8

これが発生する通常の理由は、マップが初期化された後にマップのサイズが変更されることです。何らかの理由で id="map" で div のサイズを変更した場合は、"resize" イベントをトリガーする必要があります

google.maps.event.trigger(map, 'resize');

JavaScript コンソールでイベントをトリガーして、それが役立つかどうかを確認してください。

この回答は推測であることに注意してください。質問には実際には何も対応していないため、役に立たない場合はお知らせください。

于 2012-12-16T17:47:49.303 に答える
2

私はしばらくの間、解決策を探していました。私はまったく同じ問題を抱えていましたが、私だけではありません。上記のコード行では十分ではありませんでしたが、ブラウザのサイズを手動で変更すると問題が解決することに気付きました。それがあなたのものも解決する場合、ここに私が私のものを解決する方法があります：

1) マップを初期化する関数の最後にこれを追加します。リスナーを追加し、マップがロードされたときに関数を呼び出します。基本的にサイズ変更をシミュレートします。

google.maps.event.addListenerOnce(map, 'idle', function(){
    $(window).resize();
    map.setCenter(yourCoordinates);
});

サイズ変更後にマップを中心に戻す必要がありました

2) 次のように Google マップのサイズ変更イベントを呼び出して、サイズ変更リスナーを作成します。

$(window).resize(function() {
    if ($("#map_canvas").children().length > 0){    
        if (map)
        google.maps.event.trigger(map, 'resize');
    }});

また、初期化関数の外にマップを配置する必要がありました...それが最善の解決策ではないことはわかっていますが、今のところ機能します。resize() 呼び出しについて心配する必要はありません。

Googleマップを含む隠しdivに関連しているようです。このWebサイトjfyiでも同様のソリューションを見つけました。幸運を！

于 2013-02-28T23:57:23.510 に答える
0

これは私のために働いた：

 var center = map.getCenter();
 // . . . your code for changing the size of the map
 google.maps.event.trigger(map, "resize");
 map.setCenter(center);

@Brunoが言及したリンクから取得

于 2014-06-05T14:56:35.520 に答える