Google Map API v3 - установите границы и центр

Недавно я перешел на 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]
    });
  }
}

person Michael Bradley    schedule 12.10.2009    source источник


Ответы (6)


Да, вы можете объявить свой новый объект границ.

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

Затем для каждого маркера расширьте свой объект границ:

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

API: google.maps.LatLngBounds

person spencercooly    schedule 05.02.2010
comment
вы также можете добавить этот map.setCenter (bounds.getCenter ()); - person Raman Ghai; 08.05.2013
comment
И ответ, и комментарий Рамана помогли уменьшить мое внимание к тому, что мне было нужно. - person JustJohn; 01.05.2016
comment
@ Sam152: возможно, вас заинтересует награда в размере 500 представителей за соответствующий вопрос . - person Dan Dascalescu; 28.03.2017

Все рассортировано - см. Последние несколько строк кода - (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);
}
person Michael Bradley    schedule 13.10.2009
comment
Спасибо! В документах версии 3.0 на удивление расплывчато говорится о том, куда пошла эта функциональность. - person Bill; 30.08.2010
comment
Документы 3.0 на удивление расплывчаты о том, куда делось МНОГОЕ. :( - person Scott; 29.11.2010
comment
Извините, это неправильное место. Это должен быть комментарий к выбранному ответу. Но разве функция расширения не должна находиться внутри вашего цикла for? - person kidbrax; 12.02.2011
comment
Здравствуйте, отличный код, но можно ли улучшить этот код, чтобы избежать отсутствия изображений на этом уровне масштабирования. потому что этот код не заботится об уровне масштабирования, конечно, он показывает все маркеры, но лично я бы предпочел видеть меньшее масштабирование, чтобы избежать сообщений об отсутствии изображений ... Есть идеи, пожалуйста? - person slah; 12.02.2011
comment
Это bounds.extend (myLatLng); map.fitBounds (границы); доступно и для Android? - person lionfly; 22.07.2011
comment
@kidbrax: возможно, вас заинтересует награда в размере 500 представителей за соответствующий вопрос . - person Dan Dascalescu; 28.03.2017

Мое предложение для 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);
    }
}

В результате u поместит все точки в границах вашего окна карты.

Пример работает отлично, и вы можете бесплатно проверить его здесь www.zemelapis.lt

person localtime    schedule 19.04.2011
comment
Вместо того, чтобы возвращать false, если bounds равны null, вы можете maps[ mapId ].getBounds(). - person kaiser; 18.11.2013
comment
@localtime на самом деле, вашему веб-сайту нужны ключи API Карт Google для работы - person ; 16.11.2016

Ответы идеально подходят для настройки границ карты для маркеров, но если вы хотите расширить границы Карт Google для таких фигур, как многоугольники и круги, вы можете использовать следующие коды:

Для кругов

bounds.union(circle.getBounds());

Для полигонов

polygon.getPaths().forEach(function(path, index)
{
    var points = path.getArray();
    for(var p in points) bounds.extend(points[p]);
});

Для прямоугольников

bounds.union(overlay.getBounds());

Для полилиний

var path = polyline.getPath();

var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();

for(var i = 1; i < path.getLength(); i++)
{
    var e = path.getAt(i);
    slat = ((slat < e.lat()) ? slat : e.lat());
    blat = ((blat > e.lat()) ? blat : e.lat());
    slng = ((slng < e.lng()) ? slng : e.lng());
    blng = ((blng > e.lng()) ? blng : e.lng());
}

bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));
person Hossein    schedule 14.06.2017

Метод setCenter () по-прежнему применим для последней версии API Карт для Flash, где fitBounds () не существует.

person Sebastien    schedule 20.11.2010

Используйте ниже одного,

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (границы));

person Khayer    schedule 17.03.2010
comment
Это для Google Maps API v2 - person dave1010; 30.04.2010
comment
Вам нужно предложить более продуманное решение. И я считаю, что это для Google Maps v2. - person AllJs; 16.02.2017