3

Google MapsAPIv2を使用しています。マップにマーカーを追加してから、それらのマーカーに合わせてズームします。マップが表示されている場合、これは正常に機能します。ただし、そうでない場合（たとえば、タブストリップがあり、ページの読み込み時にマップのタブが選択されていない場合）、マップを表示すると、ズームレベルと中央が間違っています。

これが簡単なテストケースです（jQueryを使用）：

<script type="text/javascript">

    var scale = Math.random() * 20;

    $(document).ready(function() {
        var $container = $('#container');
        // $container.hide();
        var map = new GMap2($('#map')[0]);
        $container.show();
        var markerBounds = new GLatLngBounds();
        for (var i = 0; i < 10; i++) {
            var randomPoint = new GLatLng(38.935394 + (Math.random() - 0.5) * scale, -77.061382 + (Math.random() - 0.5) * scale);
            map.addOverlay(new GMarker(randomPoint));
            markerBounds.extend(randomPoint);
        }
        map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
    });

</script>

<div id="container">
    <div id="map" style="margin: 100px; width: 450px; height: 300px;"></div>
</div>

これはそのままで問題なく動作しますが、コメントを外す$container.hide()とすべてが無効になります。

表示されていないdivでGoogleMapsAPIを正しく機能させる方法はありますか？

4

2 に答える 2

2

これが私がやったことです、それが価値があることのために。

            $(".TabPanel").watch("display,visibility", function() {
                $(".MapContainer", this).each(function() {
                    if ($(this).is(":visible") == true) {
                        $(this).zoomToFitMarkers();
                    };
                });
            });

これは、Rick StrahlのjQuery用監視プラグインを使用してタブパネルの可視性の変化を監視し、ズームロジックを再適用します。

完全を期すために、ここに私のzoomToFitMarkers拡張機能があります：

$.fn.zoomToFitMarkers = function() {
    var map = this[0];
    map.gmap.checkResize();
    map.bounds = new GLatLngBounds();
    if (!!map.gmap.getOverlays) {
        for (i = 0; i < map.gmap.getOverlays.length; i++) {
            map.bounds.extend(map.gmap.getOverlays[i].getLatLng());
        }
        if (map.bounds && !map.bounds.isEmpty()) {
            var zoomLevel = map.gmap.getBoundsZoomLevel(map.bounds);
            zoomLevel = zoomLevel > 9 ? 9 : zoomLevel;
            zoomLevel = zoomLevel < 2 ? 2 : zoomLevel;
            map.gmap.setCenter(map.bounds.getCenter(), zoomLevel);
        }
    }
    map.gmap.checkResize();
};

これは、いくつかの規則に依存しています。

  1. GMap2オブジェクトはに格納されますmap.gmap。ここmapで、はターゲットDOM要素です。

    var map= $("div#MapTarget")[0];
map.gmap = new google.maps.Map2(map);

  2. マーカーがマップに追加されるたびに、将来の使用のために配列に保存されます。

    var marker = new GMarker(point);
map.gmap.addOverlay(marker);
// Keep track of new marker in getOverlays array
if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array();
map.gmap.getOverlays.push(marker);
于 2010-02-28T20:02:25.660 に答える
1

あなたがする必要があるのは、GMaps2()何よりも先に作成することです。次にhide()、コンテナを追加し、ポイントを追加して、を取得しgetBoundsZoomLevel()ますshow()。これで、正常に動作するはずです。

次のことを試してください。

$(document).ready(function() {
   var $container = $('#container');

   // First create the Map.
   var map = new GMap2($('#map')[0]);

   // The container can be hidden immediately afterwards.
   $container.hide();

   // Now you can do whatever you like!
   var markerBounds = new GLatLngBounds();
   for (var i = 0; i < 10; i++) {
      var randomPoint = new GLatLng( 38.935394 + (Math.random() - 0.5) * scale, 
                                    -77.061382 + (Math.random() - 0.5) * scale);
      map.addOverlay(new GMarker(randomPoint));
      markerBounds.extend(randomPoint);
   }
   map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));

   // Finally unhide the container.
   $container.show();
});

getBoundsZoomLevel

于 2010-02-28T12:23:24.173 に答える