Wie kann man in Google Maps nach benutzergenerierten Zooms suchen?

Question

Ich möchte wissen, wann ein Google Maps-Ereignis zoom_changed speziell durch eine Benutzerinteraktion mit den +/- Zoom-Schaltflächen ausgelöst wird. Wenn ich einen allgemeinen Ereignis-Listener für zoom_changed verwende, kann ich nicht feststellen, ob es sich um ein benutzergeneriertes Ereignis oder um eine Zoomänderung handelt, die durch etwas wie fitBounds() verursacht wird. Auf der Suche nach dem besten Weg, dies zu tun.

Ich habe folgende Dinge ausprobiert, von denen keine zu funktionieren scheint:

1) für Ereignisinformationen Sah auf zoom_changed. Es scheint keine zu geben.

2) Fügen Sie Listener für MouseOver und MouseOut hinzu, mit denen ich ein Flag setzen kann, um zu sehen, ob sich der Benutzer in den MapBounds befindet, und das Flag auf zoom_changed zu überprüfen. Dies funktioniert nicht, da die Karte die Zoom-Schaltflächen nicht als Teil des Kartenrahmens betrachtet (mit anderen Worten, wenn Sie den Mauszeiger über den Zoom-Schaltflächen bewegen, wird das mouseout-Ereignis ausgelöst).

3) Fügen Sie den Zoomtasten einen normalen (nicht gMap) Listener hinzu. Ich kann jedoch keinen definitiven CSS-Selektor finden, mit dem ich nur die Tasten packen kann.

4) Suche nach einer Funktion in der gMaps-API, die mich etwas wie getZoomElements() tun lassen würde, und dann könnte ich Listener damit einstellen.

Die komische Sache ist, dass ich eindeutig tun kann, was ich will, wenn ich ein kundenspezifisches Steuerelement der Karte hinzufüge. Es scheint sehr merkwürdig, dass sie mich zwingen würden, das zu tun, anstatt einen Haken in die Standardzoomsteuerelemente zu haben.

Answer 1

Ich würde nicht nur auf die +/- Schaltflächen (oder Schaltflächen auf Ihrem eigenen benutzerdefinierten Steuerelement für diese Angelegenheit) einhängen. Der Benutzer kann den Zoom auf der Karte mit dem Mausrad oder mit einem Doppelklick auf die Karte ändern. Außerdem würden Sie sich eher auf die Implementierungsdetails als auf die dokumentierte API verlassen, die eine wichtige Nummer ist.

Das ist wirklich bedeutet, die einzige zuverlässige, dokumentierte Art und Weise eine Änderung des Zoom zu erkennen ist zum zoom_changed event der Map zu hören.

Wenn Ihr Event-Handler, ob das Ereignis von Benutzeraktion oder einen API-Aufruf kam nicht bestimmen können, gibt es zwei Ansätze:

• ein Flag gesetzt, bevor eine API-Funktion aufrufen, so dass Sie wissen, dass Sie dies ignorieren Veränderung.
• Können Sie Ihre App so umgestalten, dass es keine Rolle spielt, ob eine Zoomänderung vom Code oder vom Benutzer stammt?

Answer 2

Ich würde vorschlagen, eine benutzerdefinierte Steuerung für Zoom in/out und anschließend Ereignis-Listener auf dem benutzerdefinierten congrol mit:

http://goo.gl/u8gKC

Sie können die Standard-Zoomsteuerung leicht verbergen:

http://goo.gl/N5HIE

(zoomControl um genau zu sein)

Answer 3

Ich wollte das Gleiche machen. Ich hatte gehofft, dass es einen Weg in die Google Maps-API gibt, aber zumindest sollten Sie in der Lage sein, die anfängliche Zoomstufe als Variable zu speichern, wenn Sie die Karte initialisieren.Vergleichen Sie dann das Ergebnis von getZoom() damit, ob es sich um einen Zoom oder einen Zoom Out handelt.

Zum Beispiel:

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

ich dieses Problem gelöst, indem Benutzerdefinierte Zoomtasten für meine Karte. Hier

ist der Code von meinem Projekt:
bearbeiten: Entfernt unnötige und selbsterklärend gemeinsamen Code

Ihre Zoomcontrol-Funktion:

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); 
    }); 
} 

Ihre Initialisierungsfunktion:

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); 
} 

Hoffe es hilft

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 
    } 
}