Eventos de Google Maps
Haga clic en la marca para acercar el mapa
Todavía usamos el mapa de Londres, Inglaterra que usamos en el artículo anterior.
Cuando el usuario hace clic en la marca, se realiza la función de zoom del mapa (el evento de zoom del mapa está vinculado cuando se hace clic en la marca).
El código es el siguiente:
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getelementByid ("googlEmap"); nuevo Google.maps.marker ({posición: MyCenter, Título: 'Haga clic para Zoom'}); Marker.SetMap (MAP); // Zoom a 9 Al hacer clic en Markergoogle.maps.event.addListener (Marker, 'Click', function () {Map.Setzoom (9); Map.setCenter (Marker.getPosition ()); });} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <div ID = "GoogleMap"> </div> </body> </html>Use el controlador de eventos AddListener () para registrar la escucha del evento. Este método utiliza un objeto y un evento para escuchar, y la función se llamará cuando ocurra el evento especificado.
Restablecer la marca
Cambiamos el atributo 'Center' agregando un controlador de eventos al mapa. El siguiente código utiliza el evento Center_Changed para marcar el punto central después de 3 segundos:
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getelementByid ("googlEmap"); nuevo Google.maps.marker ({posición: MyCenter, Título: 'Haga clic en Zoom'}); Marker.SetMap (MAP); // Zoom a 9 Al hacer clic en Markergoogle.maps.event.addListener (Marker, 'Click', function () {Map.SetZoom (9); Map.setCenter (Marker.getPosition ();};}); google.maps.event.addListener(map,'center_changed',function() {// 3 seconds after the center of the map has changed, pan back to the marker window.setTimeout(function() { map.panTo(marker.getPosition()); },3000); });}google.maps.event.addDomListener(window, 'load', Initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>La ventana del mensaje se abre cuando hace clic en la marca.
Haga clic en la etiqueta para mostrar alguna información de texto en la ventana de información:
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe Google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var = new Google.maps.map (document.getElementByid ("GooglEmap"); Marker = nuevo Google.Maps.Marker ({Position: MyCenter,}); Marker.SetMap (MAP); var infowindow = new Google.maps.infowindow ({content: "¡Hola World!"}); Google.maps.event.addListener (marcador, 'Click', function () {InfoWindow.open (Map, Marker); });} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <div ID = "GoogleMap"> </div> </body> </html>Configurar marcas y abrir la ventana de información para cada marca
Ejecutar una ventana cuando el usuario haga clic en el mapa
Cuando un usuario haga clic en una ubicación en un mapa, use la función PlacEMarker () para colocar una marca en la posición especificada y aparece una ventana de mensaje:
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var map; var mycenter = newe Google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; map = nuevo Google.maps.map (document.getElementById ("googlemap"), mapprop); Google.maps.event.addListener (map, 'hacer clic', function (event) {pletemarker (event.latlng);});} function ploceMarker (ubicación) {var marcador = nuevo google.maps.marker ({posición: ubicación, mapa: map,}); var infowindow = new Google.maps.infowindow ({content: 'Latitude:' + ubicación.lat () + '<br> longitude:' + ubicación.lng ()}); Infowindow.open (map, marcador);} google.maps.event.adddomListener (ventana, 'load', inicialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Lo anterior es una compilación del conocimiento básico de los eventos de Google Maps. Continuaremos agregando conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!