Google Haritalar'ı (V3) tarayıcı yeniden boyutlandırmada ortalayın (duyarlı)

124

Sayfamda% 100 sayfa genişliğinde ve ortasında bir işaretçi bulunan bir Google Haritalar (V3) var. Tarayıcı penceremin genişliğini yeniden boyutlandırdığımda, haritanın ortalanmış (duyarlı) kalmasını istiyorum. Artık harita sayfanın sol tarafında kalıyor ve küçülüyor.

GÜNCELLEME Duncan sayesinde tam olarak anlatıldığı gibi çalışmasını sağladı. Bu son koddur:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

javascript google-maps google-maps-api-3

— Gregory Bolkenstijn
kaynak

1

aferin! evet, geçerli merkez değerini sürekli olarak global kapsama çıkarmanız gerekir, böylece dom dinleyicisi tarafından alınabilir

— efwjames

Eğer zirveye çıkacaksanız, bunu bu şekilde yapın, o centerzaman küresel olmak zorunda değilsiniz. Sağlamak center(ve calculateCenter) ile aynı kapsamdadır map, o zaman her şey çalışmalıdır. Tabii ki, eğer küreselse, mapo zaman bunu da düzeltmeniz gerekecek :)

— Roamer-1888

Belki çoğu kişi için açıktır, ancak bu kod harita yüklendikten SONRA gelir, bu nedenle en azından windows.onload

— Victoria Ruiz

teşekkürler, bu varsayılan google maps beaviours olmalı

— Yukulélé

143

Pencere yeniden boyutlandırıldığında bir olay dinleyicisine sahip olmanız gerekir. Bu benim için çalıştı (başlatma işlevinize koyun):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

— duncan
kaynak

Bu harika çalışıyor, teşekkürler! Ancak birisi haritayı hareket ettirdiyse, haritanın yeni merkezini nasıl alabilirim? GetCenter () işlevini buldum, ancak düzgün çalışmasını sağlayamıyorum. map.setCenter (map.getCenter ()); çalışmıyor.

— Gregory Bolkenstijn

Başka bir olay dinleyicisi istiyorsunuz, sanırım harita nesnesindeki "center_changed" için, global bir değişkeni yeni koordinatlarla güncelleyen ve daha sonra setCenter'ınızda kullanabileceğiniz.

— duncan

1

Bunu da denedim:

var center; google.maps.event.addListener(map, 'center_changed', function() {   center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() {   map.setCenter(center); });

Çalışmıyor. Herhangi bir yardım memnuniyetle karşılanacaktır.

— Gregory Bolkenstijn

Bunun yerine "bounds_changed" ne dersiniz?

— duncan

49

Bu en kolay yol: hsmoore.com/blog/…

— AO_

83

Tarayıcı yeniden boyutlandırma olayını algıla, Google Haritasını orta noktayı korurken yeniden boyutlandır:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Google haritasını başka yollarla yeniden boyutlandırırken aynı kodu diğer olay işleyicilerinde de kullanabilirsiniz (örneğin, bir jQuery-UI 'yeniden boyutlandırılabilir' kontrolü ile).

Kaynak: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ bağlantı için @smftre'ye kredi verin .

Not: Bu kod, @ smftre'nin kabul edilen yanıt hakkındaki yorumunda bağlantılıdır. Kabul edilen cevaptan gerçekten daha üstün olduğu için kendi cevabı olarak eklemeye değer olduğunu düşünüyorum. Merkez noktayı izlemek için global bir değişkene ve bu değişkeni güncellemek için bir olay işleyicisine olan ihtiyacı ortadan kaldırır.

— William Denniss
kaynak

@William ile anlaşın, bu yöntem harita yeniden boyutlandırıldığında daha doğru bir merkez konumuyla sonuçlanır.

— onthfloor

kabul edilen cevap doğru çalışmıyordu, bu hile yaptı

— Tom

Bu en iyi ve çalışan çözümdür. Her yeniden boyutlandırma Windows olayında çalışır. Diğer çözümler düzgün çalışmadı.

— zdarsky.peter

1

Bu gerçekten topluluk wiki olarak gönderilmeliydi.

— gustavohenke

İşe yarıyor, ama daha çok anlamak istiyorum. Tam olarak ne yapıyor google.maps.event.trigger(map, "resize");?

— meduz '

4

W3schools.com'da bazı iyi örnekler. Aşağıdakileri kullandım ve harika çalışıyor.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

— Steve Mulvihill
kaynak

0

html: Seçtiğiniz bir kimliğe sahip bir div oluşturun

<div id="map"></div>

js: Bir harita oluşturun ve onu az önce oluşturduğunuz div'e ekleyin

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Pencere yeniden boyutlandırıldığında ortala

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

— drjorgepolanco
kaynak

0

Yukarıdaki çözüm es6 olarak güncellendi.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

— David Bradshaw
kaynak

Kullandığınız addDomListenerher ikisi için windowbir DOM unsur olan ve mapolmayan, hangi. Eşleme nesnesi google.maps.event.addListenerveya kendi map.addListenerolay işleyicisini kullanmalıdır.

— duncan