API Google Map v3 - встановіть межі та центр


303

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

Відповіді:


423

Так, ви можете оголосити новий об'єкт меж.

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

Потім для кожного маркера розширіть об'єкт меж:

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

API: google.maps.LatLngBounds


42
Ви також можете додати цей map.setCenter (bounds.getCenter ());
Raman Ghai

І відповідь, і коментар Рамана допомогли знизити мою увагу на тому, що мені потрібно.
JustJohn


185

Все відсортовано - див. Останні кілька рядків для коду - ( 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);
}

7
Дякую! Документи 3.0 напрочуд розпливчасті щодо того, куди поділася ця функціональність.
Білл

12
Документи 3.0 напрочуд розпливчасті щодо того, куди пішло багато речей. :(
Скотт

5
Вибачте, що це не в тому місці. Це означає бути коментарем до обраної відповіді. Але чи не потрібно, щоб функція розширення була всередині вашого циклу?
kidbrax

1
Привіт, чудовий код, але чи можна цей код покращити, щоб уникнути "відсутніх зображень на цьому рівні збільшення". оскільки цей код не бере участь у масштабі, впевнений, що він показує всі маркери, але особисто я вважаю за краще зменшити масштаб, щоб уникнути повідомлень "немає зображень ...". Будь-яка ідея, будь ласка?
забій

Це "bounds.extend (myLatLng); map.fitBounds (межі);" доступний і для Android?
lionfly

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


Замість того, щоб повернутися, falseякщо boundsє null, ви могли б maps[ mapId ].getBounds().
кайзер

@localtime насправді для роботи вашого веб-сайту потрібні ключі API Google Maps

1

Відповіді ідеально підходять для коригування меж карти для маркерів, але якщо ви хочете розширювати межі Карт 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));

-1

Метод setCenter () досі застосовується для останньої версії API Maps for Flash, де fitBounds () не існує.


-15

Використовуйте нижче одного,

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (межі));


12
Це для API Карт Google v2
dave1010

Вам потрібно надати більш продумане рішення. І я вважаю, що це для Google Maps v2.
AllJs
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.