Come ascoltare lo zoom generato dall'utente in Google Maps?

Question

Desidero sapere quando un evento zoom_changed di Google Maps viene attivato in particolare da un'interazione dell'utente con i pulsanti +/- zoom. Se utilizzo un listener di eventi generici per zoom_changed, non posso dire se si tratta di un evento generato dall'utente o di uno zoom causato da qualcosa come fitBounds(). Cerchi il modo migliore per farlo.

Ho provato le cose seguenti, nessuno dei quali sembrano funzionare:

1) cercato informazioni su eventi zoom_changed. Non sembra esserci nessuno.

2) Aggiungi listener per mouseover e mouseout che consentono di impostare un flag per vedere se l'utente è nei limiti della mappa e controllare il flag su zoom_changed. Questo non funziona perché la mappa non considera i pulsanti di zoom come parte della cornice della mappa (in altre parole, passa con il mouse sui pulsanti di zoom per attivare l'evento mouseout).

3) Aggiungere un listener normale (non gMap) ai pulsanti di zoom. Tuttavia, non riesco a trovare un selettore CSS definitivo che mi consenta di afferrare solo i pulsanti.

4) Cercavo una funzione nell'APAP di gMaps che mi permettesse di fare qualcosa come getZoomElements(), e quindi potevo impostare i listener che lo utilizzavano.

La cosa strana è che posso fare chiaramente quello che voglio se aggiungo un controllo personalizzato alla mappa. Sembra molto strano che mi costringano a farlo invece di avere un gancio nei controlli di zoom predefiniti.

Answer 1

Non vorrei semplicemente collegarmi ai pulsanti +/- (o ai pulsanti del controllo personalizzato dell'utente). L'utente può cambiare lo zoom sulla mappa con la rotellina del mouse o facendo doppio clic sulla mappa. Inoltre, si farebbe affidamento sui dettagli di implementazione piuttosto che sull'API documentata, che è un importante no-no.

Ciò significa davvero l'unico, documentato modo affidabile per rilevare un cambiamento di zoom è quello di ascoltare il zoom_changed event del Map.

Se il gestore di eventi non può determinare se l'evento è venuto da un'azione dell'utente o di una chiamata API, ci sono due approcci:

• impostare un flag prima di chiamare una funzione API in modo che si sappia che si possono ignorare questo modificare.
• Ri-architetti la tua app in modo tale che non importa se un cambio di zoom è venuto dal codice o dall'utente?

Answer 2

Io suggerirei di usare un controllo personalizzato per lo zoom in/out e quindi utilizzando listener di eventi sul congrol personalizzato:

http://goo.gl/u8gKC

Si può facilmente nascondere il controllo di default dello zoom:

http://goo.gl/N5HIE

(zoomControl per essere precisi)

Answer 3

Stavo cercando di fare la stessa cosa. Speravo di scoprire che c'era un modo integrato nell'API di Google Maps, ma come minimo dovresti essere in grado di memorizzare il livello di zoom iniziale come variabile quando inizializzi la mappa.Quindi, confronta il risultato di getZoom() con esso per sapere se si trattava di uno zoom in o di uno zoom indietro.

Ad esempio:

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 }); 
var previous_zoom = 11; 

google.maps.event.addListener(map,'zoom_changed',function(){ 
    if(map.getZoom() > previous_zoom) { 
    alert('You just zoomed in.'); 
    } 
    previous_zoom = map.getZoom(); 
} 

Answer 4

Ho risolto questo problema creando pulsanti personalizzati Zoom per la mia mappa.

Ecco il codice dal mio progetto:
Edit: Rimosso inutile e auto esplicativo codice comune

la funzione ZoomControl:

function zoomControl(map, div) { 

    var controlDiv = div, 
     control = this; 

    // Set styles to your own pa DIV 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the zoom in div. 
    var zoomIncrease = document.createElement('div'); 
    zoomIncrease.title = 'Click to zoom in'; 
    // etc. 

    // Set CSS for the zoom in interior. 
    var zoomIncreaseText = document.createElement('div'); 
    // Use custom image 
    zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>'; 
    zoomIncrease.appendChild(zoomIncreaseText); 

    // Set CSS for the zoom out div, in asimilar way 
    var zoomDecreaseText = document.createElement('div'); 
    // .. Code .. Similar to above 

    // Set CSS for the zoom out interior. 
    // .. Code .. 

    // Setup the click event listener for Zoom Increase: 
    google.maps.event.addDomListener(zoomIncrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom+1); 
     // Other Code parts 
    }); 

    // Setup the click event listener for Zoom decrease: 
    google.maps.event.addDomListener(zoomDecrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom-1); 
    }); 
} 

la funzione di inizializzazione:

function initializeMap() { 

    var latlng = new google.maps.LatLng(38.6, -98); 
    var options = { 
     zoom : 5, 
     center : latlng, 
     mapTypeId : google.maps.MapTypeId.ROADMAP, 
     // Other Options 
    }; 
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"), 
      options); 

    // The main part - Create your own Custom Zoom Buttons 
    // Create the DIV to hold the control and call the zoomControl() 
    var zoomControlDiv = document.createElement('div'), 
     zoomLevelControl = new zoomControl(MainMap, zoomControlDiv); 

    zoomControlDiv.index = 1; 
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv); 
} 

Spero che aiuti

Answer 5

var zoomFlag = "user"; // always assume it's user unless otherwise 

// some method changing the zoom through API 
zoomFlag = "api"; 
map.setZoom(map.getZoom() - 1); 
zoomFlag = "user"; 

// google maps event handler 
zoom_changed: function() { 
    if (zoomFlag === "user") { 
    // user zoom 
    } 
}