Google Maps API v3: fitBounds'tan sonraZoom'u ayarlayabilir miyim?

Katıştırılmış bir Google Haritası'nda (API v3) çizmek istediğim bir dizi noktam var. Zoom seviyesi çok düşük (yani, çok uzaklaştırılmış) sürece sınırları tüm noktaları karşılamak istiyorum. Benim yaklaşımım şöyle oldu:

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

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

Bu işe yaramıyor. Son satır olan "gmap.setZoom ()", fitBounds'tan hemen sonra çağrılırsa haritanın zum düzeyini değiştirmez.

Bir sınırın yakınlaştırma seviyesini haritaya uygulamadan almanın bir yolu var mı? Bunu çözmek için başka fikirler?

Düzenleme : Aşağıdaki Matt Diamond'ın yorumuna bakın.

Anladım! Bunu dene:

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

İhtiyaçlarınızı değiştirin.

Uygulamalarımdan birinde benzer bir sorunu çözdüm. Sorunun açıklamasından biraz kafam karışmıştı, ama sanırım aynı hedefe sahipsin ...

Uygulamamda bir veya daha fazla işaretçi çizmek ve haritanın hepsini göstermesini sağlamak istedim. Sorun sadece fitBounds yöntemine güveniyordum, o zaman tek bir nokta olduğunda yakınlaştırma düzeyi maksimize olurdu - bu iyi değildi.

Çözüm, birçok nokta varken fitBounds ve yalnızca bir nokta varken setCenter + setZoom kullanmaktı.

if (pointCount > 1) {
  map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
  map.setCenter(mapBounds.getCenter());
  map.setZoom(14);
}

Cevabı almak için bu sayfaya birçok kez geldim ve mevcut tüm cevaplar süper yardımcı olsa da, sorunumu tam olarak çözmediler.

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

Temel olarak 'zoom_changed' olayının haritanın kullanıcı arayüzünün 'boşta' olayı beklediğimde meydana gelen “atlanmasını” engellediğini gördüm.

Umarım bu birine yardımcı olur!

Ben sadece maxZoom önceden ayarlayıp, daha sonra kaldırarak bunu düzelttim. Örneğin:

map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });

Yanılmıyorsam, tüm noktalarınızın haritada mümkün olan en yüksek yakınlaştırma seviyesine sahip olmasını istediğinizi varsayıyorum. Bunu haritanın zum düzeyini 16'ya başlatarak başardım (V3'te mümkün olan en yüksek zum seviyesi olup olmadığından emin değilim).

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 16,
  center: marker_point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

Sonra bundan sonra bir şeyler yaptım:

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

// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop

map.fitBounds(bounds);

Sonuç: Başarı!

Kullanırım:

gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less

Bu, kodunuza göre 24'ten küçük olanı ve gerekli yakınlaştırma düzeyini kullanacaktır, ancak muhtemelen yakınlaştırmayı yine de değiştirir ve ne kadar uzaklaştırdığınızı umursamaz.

Lütfen şunu deneyin:

map.fitBounds(bounds);

// CHANGE ZOOM LEVEL AFTER FITBOUNDS
zoomChangeBoundsListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  if (this.getZoom()){
    this.setZoom(15);
  }
});
setTimeout(function(){
  google.maps.event.removeListener(zoomChangeBoundsListener)
}, 2000);

Aynı sorunu vardı ve aşağıdaki kodu kullanarak çözmeyi başardı. Bu listener ( google.maps.addListenerOnce()) olayı map.fitBounds(), yürütüldükten hemen sonra yalnızca bir kez tetiklenir . Yani, gerek yok

1. Dinleyiciyi takip edin ve manuel olarak kaldırın veya
2. Harita olana kadar bekleyin idle.

Başlangıçta uygun zoom seviyesini ayarlar ve olay dinleyicinin süresi dolduğundan kullanıcının başlangıç ​​zoom seviyesinin ötesine yakınlaştırıp uzaklaşmasına olanak tanır. Örneğin, yalnızca google.maps.addListener()çağrıldıysa, kullanıcı hiçbir zaman belirtilen yakınlaştırma seviyesini geçemez (durumda 4). Uyguladığımızdan beri google.maps.addListenerOnce(), kullanıcı istediği seviyeye yakınlaşabilecektir.

map.fitBounds(bounds);

var zoom_level_for_one_marker = 4;

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
   if (this.getZoom() >= zoom_level_for_one_marker){  
       this.setZoom(zoom_level_for_one_marker) 
   }
});

Aynı sorunu vardı, harita üzerinde birçok işaret sığdırmak için gerekli. Bu davamı çözdü:

1. Sınırları beyan et
2. Koderoid tarafından sağlanan şemayı kullanın (her marker seti için bounds.extend(objLatLng))

3. Harita tamamlandıktan SONRA fitboundları yürütün:

   google.maps.event.addListenerOnce(map, 'idle', function() { 
       map.fitBounds( bounds );
   });

Aramadan önce kontrolü yapan bir çözüm buldum, fitBoundsböylece yakınlaştırmıyorsunuz ve aniden uzaklaştırmıyorsunuz

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

// extend bounds with each point

var minLatSpan = 0.001;
if (bounds.toSpan().lat() > minLatSpan) {
    gmap.fitBounds(bounds); 
} else {
    gmap.setCenter(bounds.getCenter());
    gmap.setZoom(16);
}

İstediğiniz yere ulaşmak için minLatSpan değişkeni ile biraz oynamak zorunda kalacaksınız. Hem yakınlaştırma düzeyine hem de harita tuvalinin boyutlarına göre değişir.

Enlem yerine boylam da kullanabilirsiniz

Birçok yanlış veya çok karmaşık çözüm gördüm, bu yüzden çalışan, zarif bir çözüm yayınlamaya karar verdim .

Nedeni setZoom()beklediğiniz gibi çalışmaz, bu fitBounds()eşzamansızdır, bu nedenle yakınlaştırmayı hemen güncelleyeceğine dair hiçbir garanti vermez, ancak buna yapılan çağrıya setZoom()dayanır.

Göz önünde bulundurabileceğiniz şey, minZoomarama yapmadan önce harita seçeneğini ayarlamak ve fitBounds()tamamlandıktan sonra temizlemek (böylece kullanıcılar istedikleri takdirde manuel olarak uzaklaştırabilirler):

var bounds = new google.maps.LatLngBounds();
// ... (extend bounds with all points you want to fit)

// Ensure the map does not get too zoomed out when fitting the bounds.
gmap.setOptions({minZoom: 6});
// Clear the minZoom only after the map fits the bounds (note that
// fitBounds() is asynchronous). The 'idle' event fires when the map
// becomes idle after panning or zooming.
google.maps.event.addListenerOnce(gmap, 'idle', function() {
  gmap.setOptions({minZoom: null});
});

gmap.fitBounds(bounds);

Ayrıca, maksimum zumu da sınırlamak istiyorsanız, maxZoommülkle aynı numarayı uygulayabilirsiniz .

MapOptions belgelerine bakın .

Bunu, uydu görüntülerinin mevcut olacağını bildiğim için yakınlaştırma düzeyinin ayarlanan bir düzeyi aşmamasını sağlamak için kullanıyorum.

zoom_changedEtkinliğe bir dinleyici ekleyin . Bu, kullanıcı arayüzündeki yakınlaştırma kontrolünü de kontrol etmenin ek avantajına sahiptir.

Yalnızca setZoomgerektiğinde çalıştır , bu nedenle bir ififade Math.maxveyaMath.min

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() > 19 ) { 
        map.setZoom(19); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

Uzaklaştırmayı çok fazla önlemek için:

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() < 6 ) { 
        map.setZoom(6); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

Bu işlevde, yalnızca işlev herhangi bir geometriyi kabul ettiği için geometri türünü saklamak için dinamik olarak meta veriler eklemeniz gerekir.

"fitGeometries" bir harita nesnesini genişleten bir JSON işlevidir.

"geometriler" bir MVCArray () değil, genel bir javascript dizisidir.

geometry.metadata = { type: "point" };
var geometries = [geometry];

fitGeometries: function (geometries) {
    // go and determine the latLngBounds...
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < geometries.length; i++) {
        var geometry = geometries[i];
        switch (geometry.metadata.type)
        {
            case "point":
                var point = geometry.getPosition();
                bounds.extend(point);
                break;
            case "polyline":
            case "polygon": // Will only get first path
                var path = geometry.getPath();
                for (var j = 0; j < path.getLength(); j++) {
                    var point = path.getAt(j);
                    bounds.extend(point);
                }
                break;
        }
    }
    this.getMap().fitBounds(bounds);
},

bu çalışma benim için API v3 ile ancak sabit zum ayarıyla:

var bounds = new google.maps.LatLngBounds();
// extend bounds with each point

gmap.setCenter(bounds.getCenter()); 
gmap.setZoom( 6 );

Benim gibi, eğer dinleyicilerle oynamak istemiyorsanız, bu ile geldiğim basit bir çözümdür: Haritaya kesinlikle böyle gereksinimlerinize göre çalışan bir yöntem ekleyin:

    map.fitLmtdBounds = function(bounds, min, max){
        if(bounds.isEmpty()) return;
        if(typeof min == "undefined") min = 5;
        if(typeof max == "undefined") max = 15;

        var tMin = this.minZoom, tMax = this.maxZoom;
        this.setOptions({minZoom:min, maxZoom:max});
        this.fitBounds(bounds);
        this.setOptions({minZoom:tMin, maxZoom:tMax});
    }

o zaman çağırabilir map.fitLmtdBounds(bounds)yerine map.fitBounds(bounds)tanımlanan zoom aralığında altında sınırlarını belirlemek için ... ya map.fitLmtdBounds(bounds,3,5)zoom aralığı geçersiz kılmak için ..

Lütfen bunu deneyin.

// Find out what the map's zoom level is
zoom = map.getZoom();
if (zoom == 1) {
  // If the zoom level is that low, means it's looking around the
world.
  // Swap the sw and ne coords
  viewportBounds = new
google.maps.LatLngBounds(results[0].geometry.location, initialLatLng);
  map.fitBounds(viewportBounds);
}

Bu size yardımcı olacaksa.

Herşey gönlünce olsun

Sınırların hesaplanmasından sonra, sol üst ve sağ alt köşe arasındaki mesafeyi kontrol edebilirsiniz; o zaman mesafeyi test ederek zum düzeyini anlayabilirsiniz (eğer mesafe çok uzaksa zum seviyesi düşük olurdu) o zaman setbound yöntemini veya setZoom'u kullanarak daha fazlasını seçebilirsiniz.

Bunu önermek istemiyorum, ama denemeniz gerekiyorsa - ilk çağrı

gmap.fitBounds(bounds);

Sonra yeni bir Thread / AsyncTask oluşturun, 20-50ms kadar uyutun ve sonra arayın

gmap.setZoom( Math.max(6, gmap.getZoom()) );

UI iş parçacığından ( onPostExecuteAsyncTask için bir işleyici veya yöntem kullanın).

Çalışıp çalışmadığını bilmiyorum, sadece bir öneri. Bunun dışında zum seviyesini bir şekilde noktalarınızdan kendiniz hesaplamanız, çok düşük olup olmadığını kontrol etmeniz, düzeltmeniz ve ardındangmap.setZoom(correctedZoom)

'Bounds_changed' doğru şekilde tetiklenmiyorsa (bazen Google koordinatları mükemmel bir şekilde kabul etmiyor gibi görünüyorsa), bunun yerine 'center_changed' kullanmayı düşünün.

'Center_changed' olayı fitBounds () her çağrıldığında tetiklenir, ancak harita taşındıktan hemen sonra ve zorunlu olarak gerçekleşmez.

Normal durumlarda, 'boşta' hala en iyi olay dinleyicisidir, ancak bu birkaç kişinin fitBounds () çağrılarıyla garip sorunlarla karşılaşmasına yardımcı olabilir.

Google Maps fitBounds geri aramasına bakın

Başka bir çözümle karşılaşmak için - "bounds_changed olayını dinle ve sonra yeni zum ayarla" yaklaşımının benim için güvenilir bir şekilde çalışmadığını gördüm. Bazen fitBoundsharita tamamen başlatılmadan önce aradığımı düşünüyorum ve başlatma, fitBoundssınırları ve yakınlaştırma seviyesini değiştirmeden önce dinleyiciyi kullanacak bir bounds_changed olayına neden oluyordu . Şimdiye kadar çalışıyor gibi görünüyor bu kod ile sona erdi:

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});

Benim için en kolay çözüm şuydu:

map.fitBounds(bounds);

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);

google.maps.event.addListener(marker, 'dblclick', function () {
    var oldZoom = map.getZoom(); 
    map.setCenter(this.getPosition());
    map.setZoom(parseInt(oldZoom) + 1);
});

Tek yaptığım:

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

Ve V3 API üzerinde çalışıyor.