Eventos do Google Maps
Clique na marca para ampliar o mapa
Ainda usamos o mapa de Londres, Inglaterra, que usamos no artigo anterior.
Quando o usuário clica na marca, a função de ampliar o mapa é realizada (o evento de zoom do mapa é encadernado quando a marca é clicada).
O código é o seguinte:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.Map (DocumentMegyMemementBy). novo google.maps.marker ({Posição: MyCenter, Título: 'Clique em Zoom'}); Marker.setMap (map); // zoom para 9 Ao clicar em markergoogle.maps.event.addlistener (marker, 'click', function () {Map.set.Set. });} google.maps.event.adddomListener (Window, 'load', Initialize); </script> </firpe> <body> <div id = "googleMap"> </div> </body> </html>Use o manipulador de eventos addListener () para registrar a escuta do evento. Este método usa um objeto e um evento para ouvir, e a função será chamada quando o evento especificado ocorrer.
Redefina a marca
Mudamos o atributo 'Center' adicionando um manipulador de eventos ao mapa. O código a seguir usa o evento Center_Changed para marcar o ponto central após 3 segundos:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.Map (DocumentMegyMemementBy). novo google.maps.marker ({Posição: MyCenter, Título: 'Clique em Zoom'}); Marker.setMap (map); // zoom para 9 Ao clicar em markergoogle.maps.event.addlistener (marker, 'click', function () {map.set.setZoom (9); map.setCenter (marker, 'clique', function () {Map.set.Set. google.maps.event.addlistener (map, 'Center_changed', function () {// 3 segundos após o centro do mapa mudar, pague de volta ao marcador window.setTimeout (function () {map.panto (marker.getPosition ());}, 3000);}); Initialize); </script> </ad> <body> <div id = "googleMap"> </div> </body> </html>A janela da mensagem é aberta quando você clica na marca.
Clique na tag para exibir algumas informações de texto na janela de informações:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.map (DocumentAMENTBY; Marker = novo google.maps.marker ({Posição: myCenter,}); marker.setMap (map); var infowindow = new google.maps.infowindow ({content: "hello world!"}); google.maps.event.addlistener (marker, 'click', function () {infoLia });} google.maps.event.adddomListener (Window, 'load', Initialize); </script> </firpe> <body> <div id = "googleMap"> </div> </body> </html>Definir marcas e abrir a janela de informações para cada marca
Execute uma janela quando o usuário clicar no mapa
Quando um usuário clicar em um local em um mapa, use a função placemarker () para colocar uma marca na posição especificada e uma janela de mensagem aparece:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=AIZASYDY0KKJITPVD2U7ATOAWHC9YSH6OHXOIYM&sensor=False"> </script> <script> google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MaptypeId: google.maps.maptypeid.roadmap}; mapa = novo google.maps.map (document.getElementById ("googleMap"), mapprop); google.maps.event.addlistener (map, 'click', function (event) {placemarker (event.latlng);});} função placemarker (location) {var marker = new google.maps.marker ({position: location, map:}); var infowindow = new google.maps.infowindow ({content: 'latitude:' + location.lat () + '<br> longitude:' + location.lng ()}); infowindow.open (map, marcador);} google.maps.event.adddomListener (window, 'load', inicializar); </script> </fabela> <body> <div id = "googleMap"> </div> </body> </html>O exposto acima é uma compilação do conhecimento básico dos eventos do Google Maps. Continuaremos a adicionar conhecimento relevante no futuro. Obrigado pelo seu apoio a este site!