Pusat / Atur Zoom Peta untuk mencakup semua Penanda yang terlihat?


352

Saya menetapkan beberapa penanda di peta saya dan saya dapat mengatur secara statis tingkat zoom dan pusat tetapi yang saya inginkan adalah, untuk mencakup semua penanda dan memperbesar sebanyak mungkin agar semua pasar terlihat

Metode yang tersedia mengikuti

setZoom(zoom:number)

dan

setCenter(latlng:LatLng)

Tidak setCentermendukung beberapa lokasi atau input array Lokasi juga setZoomtidak memiliki jenis fungsi ini

masukkan deskripsi gambar di sini



Anda perlu menambahkan latlngke boundsobjek setiap kali Anda menambahkan penanda dan mengatur peta Anda agar sesuai dengan batas akhir. Lihat jawabannya di sini: stackoverflow.com/questions/1556921/…
Suvi Vignarajah

Jawaban:


678

Anda perlu menggunakan fitBounds()metode ini.

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

Dokumentasi dari developers.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Parameter:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

Nilai Pengembalian: Tidak Ada

Menetapkan viewport untuk berisi batas yang diberikan.
Catatan : Ketika peta diatur ke display: none, fitBoundsfungsi membaca ukuran peta sebagai 0x0, dan karena itu tidak melakukan apa pun. Untuk mengubah viewport saat peta disembunyikan, atur peta visibility: hidden, dengan demikian memastikan div peta memiliki ukuran aktual.


3
Dari mana getPositionmetode itu berasal?
Pratheep

6
@Pratheep - ini adalah bagian dari kelas google.maps.Marker; developers.google.com/maps/documentation/javascript/…
Adam

Bekerja seperti pesona! Terima kasih
Joseph N.

9
Sama seperti menyisihkan untuk pemula di luar sana, dengan pertanyaan yang sama seperti Pratheep ... Anda tahu ini jika Anda berpengalaman dengan Maps API, tetapi Anda selalu dapat memberikan LatLngLiteralbukannya memiliki contoh Marker. misalnya bounds.extend({lat: 123, lng: 456}),.
Kyle Baker

1
Kiat tambahan untuk siapa pun yang tertarik. Anda dapat menentukan lapisan dengan menggunakan fitBounds(bounds, int)yang akan memungkinkan Anda memiliki sedikit ruang antara penanda dan tepi peta (atau lebih sedikit ruang jika Anda membutuhkan). Lihat Dokumentasi
MickelsonMichael

178

Untuk memperluas jawaban yang diberikan dengan beberapa trik bermanfaat:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

UPDATE:
Penelitian lebih lanjut dalam topik ini menunjukkan bahwa fitBounds () adalah asynchronic dan yang terbaik adalah membuat manipulasi Zoom dengan pendengar yang ditentukan sebelum memanggil Fit Bounds.
Terima kasih @Tim, @ xr280xr, lebih banyak contoh pada topik: SO: setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

4
Tambahan yang bagus. Terima kasih!
paneer_tikka

1
Saya mengalami undefined dikembalikan oleh .getZoom (). Jawaban ini membantu saya menyelesaikannya dengan menggunakan addListenerOnceon zoom_changeduntuk mengatur zoom setelah nilainya diinisialisasi.
xr280xr

1
Terima kasih @ d.raev tetapi mengatur zoom maks ketika batas sudah ditetapkan tidak berfungsi. Yang harus Anda lakukan adalah mengatur opsi "maxZoom" saat menginisialisasi peta Anda. developers.google.com/maps/documentation/javascript/…
Tim

1
Di bagian tentang manipulasi zoom ( PEMBARUAN ), Anda sedang mencampur pasangan dan cakupan. Anda menggunakan yourMap, mapdan this. Mungkin ide yang bagus untuk membuatnya lebih konsisten.
Gustavo Straube

11

Ukuran array harus lebih besar dari nol. Ο sebaliknya, Anda akan mendapatkan hasil yang tidak terduga.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

8

Ada MarkerClustererutilitas sisi klien ini tersedia untuk google Map sebagaimana ditentukan di sini di Artikel pengembang Google Map , di sini adalah singkat tentang apa penggunaannya:

Ada banyak pendekatan untuk melakukan apa yang Anda minta:

  • Pengelompokan berbasis grid
  • Pengelompokan berbasis jarak
  • Manajemen Penanda Viewport
  • Tabel Fusion
  • Marker Clusterer
  • MarkerManager

Anda dapat membacanya di tautan yang disediakan di atas.

Marker Clusterermenggunakan Grid Based Clustering untuk mengelompokkan semua marker yang ingin grid. Pengelompokan berbasis-grid berfungsi dengan membagi peta menjadi kotak-kotak dengan ukuran tertentu (ukurannya berubah di setiap zoom) dan kemudian mengelompokkan penanda ke dalam setiap kotak persegi.

Sebelum Clustering Sebelum Clustering

Setelah Clustering Setelah Clustering

Saya harap ini yang Anda cari & ini akan menyelesaikan masalah Anda :)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.