Événements Google Maps
Cliquez sur la marque pour zoomer la carte
Nous utilisons toujours la carte de Londres, en Angleterre, que nous avons utilisée dans l'article précédent.
Lorsque l'utilisateur clique sur la marque, la fonction du zoom de la carte est réalisée (l'événement de zoom de carte est lié lorsque la marque est cliquée).
Le code est le suivant:
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <pris> var mycentre = new google.maps.latlng (51.508742, -0.120850); fonction initialize () {var mapprop = {Center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getelementByid ("googlemap"), mAVPROP); google.maps.marker ({position: myCenter, titre: 'cliquez pour zoom'}); marker.setmap (map); // zoom vers 9 lorsque vous cliquez sur MarkerGoogle.maps.event.addListener (Marker, 'click', function () {map.setzoom (9); map.setCenter (Marker.getPosition ()); });} google.maps.event.adddomListener (Window, 'Load', Initialize); </cript> </ head> <body> <div id = "googlemap"> </div> </ body> </html>Utilisez le gestionnaire d'événements addListener () pour enregistrer l'écoute de l'événement. Cette méthode utilise un objet et un événement pour écouter, et la fonction sera appelée lorsque l'événement spécifié se produit.
Réinitialiser la marque
Nous modifions l'attribut «Centre» en ajoutant un gestionnaire d'événements à la carte. Le code suivant utilise l'événement central_changed pour marquer le point central après 3 secondes:
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <pris> var mycentre = new google.maps.latlng (51.508742, -0.120850); fonction initialize () {var mapprop = {Center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getelementByid ("googlemap"), mAVPROP); google.maps.marker ({position: myCenter, titre: 'cliquez pour zoom'}); marker.setmap (map); // zoom vers 9 lorsque vous cliquez sur markergoogle.maps.event.addlistener (Marker, 'click', function () {map.setzoom (9); map.setCenter (Marker.getPosition ());}); google.maps.event.addListener (map, 'Center_Changed', function () {// 3 secondes après que le centre de la carte a changé, le pan à la fenêtre marqueur.SetTimeout (function () {map.panto (Marker.GetPosition ());}, 3000);});} initialiser); </cript> </ head> <body> <div id = "googlemap"> </div> </body> </html>La fenêtre de message s'ouvre lorsque vous cliquez sur la marque.
Cliquez sur la balise pour afficher certaines informations de texte dans la fenêtre d'information:
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <pris> var mycentre = new google.maps.latlng (51.508742, -0.120850); fonction initialize () {var mapprop = {Center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getelementByid ("googlemap"), mAVPROP); google.maps.marker ({position: myCenter,}); marker.setmap (map); var infowindow = new Google.maps.infowIndow ({contenu: "Hello World!"}); google.maps.event.addlistener (Marker, 'click', function () {infowindow.open (map, marker); });} google.maps.event.adddomListener (Window, 'Load', Initialize); </cript> </ head> <body> <div id = "googlemap"> </div> </ body> </html>Définir les marques et ouvrir la fenêtre d'information pour chaque marque
Exécutez une fenêtre lorsque l'utilisateur clique sur la carte
Lorsqu'un utilisateur clique sur un emplacement sur une carte, utilisez la fonction de placeMarker () pour placer une marque sur la position spécifiée et une fenêtre de message apparaît:
Exemple
<html> <éadfr> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <prict> var map; var mycenter = new google.maps.latlng (51.508742, -0.120850); fonction initialize () {var mapprop = {Centre: myCenter, zoom: 5, mapTypeid: google.maps.maptypeid.roadmap}; map = new Google.maps.map (document.getElementById ("googlemap"), mapprop); google.maps.event.addListener (map, 'click', fonction (événement) {licemarker (event.latlng);});} fonction placeMarker (emplacement) {var marqueur = new google.maps.marker ({position: emplacement, map: map,}); var infowindow = new Google.maps.infowIndow ({contenu: 'latitude:' + location.lat () + '<br> longitude:' + location.lng ()}); infowindow.open (map, marker);} google.maps.event.adddomListener (fenêtre, 'charger', initialiser); </cript> </ head> <body> <div id = "googlemap"> </div> </ body> </html>Ce qui précède est une compilation des connaissances de base des événements Google Maps. Nous continuerons d'ajouter des connaissances pertinentes à l'avenir. Merci pour votre soutien à ce site!