9

たくさんのマーカーがあり、それらを含む領域のみを表示したいと思います。私は同様の質問の長いリストを見つけました(いくつかについては投稿の下部を参照してください)が、どの解決策も私にはうまくいきません。LatLngBoundsは正しくビルドされていますが、fitBoundsを呼び出すと、結果は次のようになります。 fitBounds()を呼び出した後 代わりに: どうあるべきか 誰かが私のコードに明らかなエラーを見つけることができますか?

var opt = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
var box = new google.maps.LatLngBounds();
for(var i=0;i<list.length;i++){
    var p = new google.maps.LatLng(list[i].lat,list[i].lon);
    var marker = new google.maps.Marker({
        position: p,
        map: map
    });
    box.extend(p);
}
map.fitBounds(box);
map.panToBounds(box);

私が読んで試した投稿のいくつか(包括的ではないリスト):


編集:これは、(私のアプリケーションで行っているように)マップが最初に非表示になり、後でのみ表示される場合に実際に発生します。私はそれをこのように隠します:

$('#map').hide();

そしてそれを見せてください:

$('#map').show(function(){
  //this is necessary because otherwise
  //the map will show up in the upper left corner 
  //until a window resize takes place
  google.maps.event.trigger(map, 'resize');
});

これが発生する理由とそれを防ぐ方法(最初に表示されたときにマップを初期化することは別として)に関する手がかりはありますか?

ちなみに、マップオブジェクトを宣言するときにズームと中央を設定すると(つまり、使用しない場合fitBounds())、非表示/表示後でもマップは正しく表示されます。ただし、ポイントのリストは他の場所で取得され、事前にどこにあるかわからないため、ズームと中央を設定することはできません。

4

5 に答える 5

13

解決しました(ただし、良い方法ではありません)。私がやったのはLatLngBounds、ページをロードするときにポイントで を初期化することでしたが、マップを表示するときにのみパンとズームを行いました。このようにして、正しく動作します。例えば

var box;
function init(){
  var opt = {
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"),opt);
  box = new google.maps.LatLngBounds();
  for(var i=0;i<list.length;i++){
      var p = new google.maps.LatLng(list[i].lat,list[i].lon);
      var marker = new google.maps.Marker({
          position: p,
          map: map
      });
      box.extend(p);
  }
}

そして、後で(たとえば、ボタンをクリックします)

function showMap(){
  $('#map').show(function(){
    google.maps.event.trigger(map, 'resize');
    map.fitBounds(box);
    map.panToBounds(box);
  });
}

それは機能しますが、そのグローバル変数がぶらぶらしているのは好きではありません。OpenLayers を使用してまったく同じ動作を実装しましたが、このハックを必要とせずに正しく動作します。誰かがより良い解決策を持っている場合は、投稿してください。うまくいけば受け入れます。

@Engineer と @Matt Handy のおかげで、考えられるエラーの原因を 1 つ排除することができました。

于 2012-06-22T09:30:25.383 に答える
1

あなたのコードをフィドルで試してみましたが、期待どおりに動作します。

したがって、コードが失敗する理由は、データポイントの定義にある必要があります (エンジニアによって既に提案されているように)。あなたのリスト定義と私のリスト定義を比較して、それらが異なるかどうかを確認してください。

于 2012-06-19T13:34:09.723 に答える
0

ニーズに合わせて変更

map.fitBounds(bounds);

var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});
于 2012-06-19T12:58:24.233 に答える