Google Maps Ereignisse
Klicken Sie auf die Marke, um die Karte zu zoomen
Wir verwenden immer noch die Karte von London, England, die wir im vorherigen Artikel verwendet haben.
Wenn der Benutzer auf die Marke klickt, wird die Funktion des Zoomens der Karte realisiert (das Map -Zoom -Ereignis wird gebunden, wenn die Markierung geklickt wird).
Der Code ist wie folgt:
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.marker ({Position: myCenter, title: 'klicke to zoom'}); marker.setMap (map); // Zoom bis 9 beim Klicken auf markerGoogle.maps.event.addListener (marker, 'click', function () {map.setzoom (9); });} google.maps.event.adddomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Verwenden Sie den Event -Handler von AddListener (), um das Anhören des Ereignisses zu registrieren. Diese Methode verwendet ein Objekt und ein Ereignis zum Anhören, und die Funktion wird aufgerufen, wenn das angegebene Ereignis auftritt.
Setzen Sie die Marke zurück
Wir ändern das Attribut "Zentrum", indem wir der Karte einen Ereignishandler hinzufügen. Der folgende Code verwendet das Center_Changed -Ereignis, um den Mittelpunkt nach 3 Sekunden zu markieren:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.marker ({Position: myCenter, title: 'klicken, um zu zoom'}); marker.setMap (map); // Zoom bis 9 beim Klicken auf markerGoogle.maps.event.addListener (marker, 'click', function () {map.setzoom (9); google.maps.event.addListener (map, 'center_changed', function () {// 3 Sekunden, nachdem die Mitte der Karte geändert wurde, zurück zum Markerfenster. initialisieren); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Das Nachrichtenfenster wird geöffnet, wenn Sie auf die Marke klicken.
Klicken Sie auf das Tag, um einige Textinformationen im Informationsfenster anzuzeigen:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.marker ({Position: myCenter,}); marker.setMap (map); var infowindow = new google.maps.infowindow ({Inhalt: "Hallo Welt!"}); google.maps.event.addListener (Marker, "klicks", function () {Infowindow.OPEN (MAPEN (MAPEL); });} google.maps.event.adddomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Festlegen von Markierungen und Öffnen des Informationsfensters für jede Marke
Führen Sie ein Fenster aus, wenn der Benutzer auf die Karte klickt
Wenn ein Benutzer auf einen Speicherort auf einer Karte klickt, verwenden Sie die Funktion "placemarker (), um eine Markierung in der angegebenen Position zu platzieren, und ein Nachrichtenfenster wird angezeigt:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7oaWhc9ysh6ohxoiym&sensor=false"> </script> var map; var map; var map; google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.RoadMap}; map = new Google.maps.map (document.getElementById ("googlemap"), mapprop); google.maps.event.addListener (map, 'click', function (event) {placemarker (event.latlng);}); var infowindow = new Google.maps.infowindow ({Inhalt: 'Latitude:' + location.lat () + '<br> Längengrad:' + location.lng ()}); infowindow.open (map, marker);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Das obige ist eine Zusammenstellung des Grundwissens von Google Maps -Ereignissen. Wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!