313

最近、Google Maps API V3 に切り替えました。配列からマーカーをプロットする簡単な例を作成していますが、マーカーに対して自動的に中央に配置してズームする方法がわかりません。

Google 独自のドキュメントを含め、ネットの高低を検索しましたが、明確な答えは見つかりませんでした。単純に座標の平均を取ることができることはわかっていますが、それに応じてズームを設定するにはどうすればよいでしょうか?

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));


      var lat = map.getCenter().lat(); 
      var lng = map.getCenter().lng();      


  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
4

6 に答える 6

433

はい、新しい境界オブジェクトを宣言できます。

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

次に、マーカーごとに、境界オブジェクトを拡張します。

bounds.extend(myLatLng);
map.fitBounds(bounds);

API:google.maps.LatLngBounds

于 2010-02-05T07:14:28.917 に答える
194

すべてを並べ替えました-コードの最後の数行を参照してください-(bounds.extend(myLatLng); map.fitBounds(bounds);

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}
于 2009-10-13T19:28:17.450 に答える
5

Google Maps API v3 に対する私の提案は次のようになります (より効率的に実行できるとは思わないでください):

gmap : {
    fitBounds: function(bounds, mapId)
    {
        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    }
}

結果では、すべてのポイントがマップ ウィンドウの境界に収まります。

例は完全に機能し、ここで自由に確認できますwww.zemelapis.lt

于 2011-04-19T16:35:30.007 に答える
-1

setCenter() メソッドは、fitBounds() が存在しない Maps API for Flash の最新バージョンにも適用できます。

于 2010-11-20T22:09:47.517 に答える
-15

以下のものを使用してください、

map.setCenter(bounds.getCenter()、map.getBoundsZoomLevel(bounds));

于 2010-03-17T15:23:21.080 に答える