Google Map API v3-设置范围和中心

Question

我最近切换到了Google Maps API V3。我正在研究一个从数组绘制标记的简单示例，但是我不知道如何相对于标记自动居中和缩放。

我搜寻了包括谷歌自己的文档在内的最高和最低值，但没有找到明确的答案。我知道我可以简单地取坐标的平均值，但是如何设置缩放比例呢？

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]

    });

  }

}

Answer 1

是的，只需声明新的bounds对象。&nbsp;var bounds = new google.maps.LatLngBounds();然后对于每个标记，扩展您的bounds对象：bounds.extend(myLatLng);map.fitBounds(bounds);API：google.maps.LatLngBounds

Answer 2

一切都排序了-请查看最后几行代码-（bounds.extend(myLatLng); map.fitBounds(bounds);）function initialize() {&nbsp; var myOptions = {&nbsp; &nbsp; zoom: 10,&nbsp; &nbsp; center: new google.maps.LatLng(0, 0),&nbsp; &nbsp; mapTypeId: google.maps.MapTypeId.ROADMAP&nbsp; }&nbsp; var map = new google.maps.Map(&nbsp; &nbsp; document.getElementById("map_canvas"),&nbsp; &nbsp; myOptions);&nbsp; setMarkers(map, beaches);}var beaches = [&nbsp; ['Bondi Beach', -33.890542, 151.274856, 4],&nbsp; ['Coogee Beach', -33.923036, 161.259052, 5],&nbsp; ['Cronulla Beach', -36.028249, 153.157507, 3],&nbsp; ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],&nbsp; ['Maroubra Beach', -33.950198, 151.159302, 1]];function setMarkers(map, locations) {&nbsp; var image = new google.maps.MarkerImage('images/beachflag.png',&nbsp; &nbsp; new google.maps.Size(20, 32),&nbsp; &nbsp; new google.maps.Point(0,0),&nbsp; &nbsp; new google.maps.Point(0, 32));&nbsp; var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',&nbsp; &nbsp; new google.maps.Size(37, 32),&nbsp; &nbsp; new google.maps.Point(0,0),&nbsp; &nbsp; new google.maps.Point(0, 32));&nbsp; var shape = {&nbsp; &nbsp; coord: [1, 1, 1, 20, 18, 20, 18 , 1],&nbsp; &nbsp; type: 'poly'&nbsp; };&nbsp; var bounds = new google.maps.LatLngBounds();&nbsp; for (var i = 0; i < locations.length; i++) {&nbsp; &nbsp; var beach = locations[i];&nbsp; &nbsp; var myLatLng = new google.maps.LatLng(beach[1], beach[2]);&nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; position: myLatLng,&nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; shadow: shadow,&nbsp; &nbsp; &nbsp; icon: image,&nbsp; &nbsp; &nbsp; shape: shape,&nbsp; &nbsp; &nbsp; title: beach[0],&nbsp; &nbsp; &nbsp; zIndex: beach[3]&nbsp; &nbsp; });&nbsp; &nbsp; bounds.extend(myLatLng);&nbsp; }&nbsp; map.fitBounds(bounds);}