Índice
Os serviços oferecidos pela API Javascript do Google Maps são tão variados quanto funcionais, eles têm uma qualidade que os diferencia Mapas do Google De seus concorrentes, esses serviços geralmente funcionam de forma assíncrona, o que permite que a solicitação seja feita a um servidor externo e um método do tipo callback se encarrega de processar as respostas.Um dos pontos fortes desses serviços é que eles são totalmente compatíveis com classes e objetos de API. Podemos desde consultar o endereço de um ponto específico do nosso mapa até implementar o Street View.
Antes de passar para os exemplos, vamos ver alguns dos serviços mais importantes que usaremos neste tutorial.
Codificação geográficaEste serviço nos permite transformar endereços comuns em coordenadas geográficas com base na latitude e longitude de um ponto, isso nos permite colocar marcadores ou posicionar nosso mapa, para realizar essas operações a API fornece uma classe chamada geocodificador ().
Matriz de distânciaEste serviço ajuda-nos a calcular a distância e a duração do percurso entre múltiplos pontos, algo que é muito utilizado nos dias de hoje, para isso temos o propósito de google.maps.DistanceMatrixService e seus métodos associados.
Vista da ruaServiço Vista da rua ou o street view oferece vistas panorâmicas de 360 graus nas áreas onde tem cobertura, o que fará com que nossos mapas se destaquem sem dúvida.
Lembre-se de que aqui detalhei o funcionamento da API e o tratamento de eventos no Google Maps e a introdução para entender a API Javascript no Google Maps.
Para realizar este exemplo, estaremos usando o serviço geocodificador () Mas como mencionamos, isso nos permite transformar um endereço em uma coordenada, tudo bem, mas para o usuário convencional é algo que não vê muita utilidade para isso, por isso vamos usar o geocodificador reverso para obter o endereço de que precisamos com um clique. Vamos ver os passos que devemos seguir:
1- Primeiramente, como já sabemos, incluímos a API, sem deixar de usar nossas credenciais, além disso incluiremos a biblioteca de desenhando que nos permitirá implementar a funcionalidade de marcadores de desenho, concatenamos essa biblioteca à nossa credencial com o símbolo &, como veremos a seguir:
2- Não podemos esquecer os estilos do mapa, que lhe darão o tipo de visualização na página, bem como definir as variáveis globais que terão escopo global em todos os métodos do nosso código:
var map; var geocoder var popup;
3- Depois disso, definimos nosso método initializeMap () onde a primeira coisa que faremos é declarar nosso objeto do tipo geocodificador nos ajudando da aula Geocodificador () e com InfoWindow o objeto para o pop-up que exibirá o endereço na tela:
função initializeMap () {geocoder = new google.maps.Geocoder (); popup = new google.maps.InfoWindow (); 4- Incluímos as opções convencionais do mapa como o centro, o zoom e o tipo de base, obtemos o elemento SOL e nós instanciamos o método Mapa:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Agora criamos o gerenciador de desenho que nos permitirá desenhar marcadores, para isso faremos uma instância de DrawingManager, o tornamos visível na interface do usuário e selecionamos quais modos serão exibidos no controle e em que posição eles estarão:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Agora habilitamos a funcionalidade recém-criada, adicionamos o ouvinte para nosso evento e para realizar geocodificador reverso obtemos a posição em latitude e longitude do nosso marcador com o método getPosition ():
drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- A fim de completar o geocodificador reverso vamos usar o serviço de geocódigo () e faremos uma condicional para verificar se o serviço retorna uma resposta válida se não o manipularmos para que o usuário saiba que falhou e se o resultado estiver correto, chamamos nosso método Mostrar endereço ():
geocoder.geocode ({'latLng': markerPosition}, function (results, status) {if (status == google.maps.GeocoderStatus.OK) {if (results) {ShowAddress (results [0], marker);}} else {alert ("Falha no serviço:" + status);}}); 8- Finalmente, só temos que construir o método de Mostrar endereço () que receberá o resultado do nosso geocodificador reverso e a posição do marcador, com isso podemos estabelecer o centro e exibir as informações do endereço formatado sem nenhum problema:
função ShowAddress (resultado, marcador) {map.setCenter (marcador.getPosition ()); map.setZoom (13); var popupContent = 'Endereço: '+ result.formatted_address; popup.setContent (popupContent); popup.open (mapa, marcador); } 9- Fechamos as tags correspondentes e adicionamos a parte do código HTML para completar nosso exemplo:
Encontre o endereço no mapa com um clique
10- Executamos em nosso navegador e clicamos em qualquer ponto de nosso mapa e obteremos o endereço exibido no pop-up que declaramos, deve ser o seguinte:
PROLONGAR
O API Javascript do Google Maps nos fornece serviços bastante úteis, um deles é o matriz de distância o que nos permite calcular a distância e o tempo entre vários pontos, funcionalidade que podemos utilizar para implementar diferentes soluções em qualquer negócio, desde o cálculo dos prazos de entrega até ao estabelecimento do percurso ideal entre os vários pontos. Vamos ver os passos que devemos seguir para implementar esta funcionalidade entre nossos mapas.
1- Incluímos nossa API junto com a biblioteca desenhando, bem como os estilos para a exibição de nosso mapa e o contêiner de nossa matriz:
2- Definimos variáveis globais para uso em todo o escopo de nosso código e na função initializeMap () Inicializamos as matrizes para lidar com a latitude e longitude da origem e do destino:
var map; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; função initializeMap () {originLatLon = []; destinationLatLon = []; 3- Então, na mesma função, obtemos o botão e o manipulador de eventos para ele, além disso, inicializamos o objeto para o serviço de DistanceMatrixService bem como o contador para os marcadores e atribuir o resultado da matriz a um div de contêiner:
var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ('clique', função () {MatrixRequest ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); marcadorCount = 0; matriz de resultados = document.getElementById ('matriz de resultados'); 4- Incluímos as opções convencionais do mapa como o centro, o zoom e o tipo de base, obtemos o elemento SOL e nós instanciamos o método Mapa:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Como no exercício anterior criamos o gerenciador de desenhos que nos permitirá desenhar marcadores, para isso faremos uma instância de DrawingManager e nós fornecemos as opções necessárias, habilitamos e adicionamos o listener para o evento:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- A seguir realizamos as validações para limitar o número de destinos permitidos e definir os ícones que vamos usar para os nossos favoritos:
marcadorCount ++; if (markerCount> 10) {alert ("Não são permitidos mais destinos"); drawingManager.setMap (null); marcador.setMap (nulo); Retorna; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marcador.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marcador.getPosition ()); marcador.setIcon ('img / videogames.png.webp'); }}); 7- Agora só temos que criar nossas funções para lidar com as solicitações feitas ao serviço de distanceMatrixService, primeiro criamos aquele que irá preparar a propriedade da solicitação:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origins: LatinSource, destinos: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Criamos a função de callback e que nos permitirá obter a resposta do serviço e na qual incluiremos as validações necessárias caso o serviço falhe em tratar o erro da melhor maneira:
função getResultMatrix (resultado, status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; para (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; para (var j = 0, m = elements.length; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; elemento var = elementos [j]; var distance = element.distance.text; var duration = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distance, duration, i, j); }}} else {alert ('Não foi possível obter array:' + status); } 9- Além disso, criamos a função que escreverá os resultados obtidos no div correspondente:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newContent; newContent = 'Origin '+ countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Destino '+ countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Destino: '+ distância +'
'; newContent + = 'Destino: '+ duração +'
'; newContent + = '
'; resultArray.innerHTML = existingContent + newContent; } 9- Por último em nosso Javascript Tratamos os contadores em uma função para retornar o nome correspondente ao contador do marcador que estamos colocando:
function countLetters (count) {switch (count) {case 0: return 'Comics Store'; caso 1: retornar 'Loja de videogame'; caso 2: devolver 'Loja de Quadrinhos'; caso 3: devolver 'Loja de Quadrinhos'; caso 4: retornar 'Loja de videogame'; padrão: retorna nulo; }} 10- Fechamos as tags correspondentes e adicionamos a parte do código HTML para completar nosso exemplo:
Use matriz de distância
11- Executamos nosso exemplo no navegador e para visualizar o funcionamento do nosso mapa, colocaremos 4 pontos de interesse e apertaremos o botão Gerar Matriz de Distância:
PROLONGAR
Para terminar este tutorial, vamos implementar o serviço Vista da rua, É um exemplo bastante simples mas que somado aos demais serviços disponíveis, fará com que nossos mapas se destaquem dos demais, vamos ver o que devemos fazer para implementar este serviço:
1- Incluímos a API e definimos os estilos correspondentes, neste exemplo não usaremos a biblioteca de desenhos, portanto, ela não será incluída:
2- Definimos nossas variáveis globais e criamos nossa função initializeMap () Com as opções convencionais, centro de nosso mapa, zoom e tipo de base, obtemos o elemento SOL e nós instanciamos o método Mapa:
var map; var geocoder; var streetView; função initializeMap () {pop-up = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 3- Dentro da nossa função chamamos o serviço de Vista da rua e depois disso criamos uma função para definir suas opções, como localização e ponto de vista:
streetView = map.getStreetView (); } função setOptionsStreetView (localização) {streetView.setPosition (localização); streetView.setPov ({título: 0, coceira: 10}); } 4- Por fim, criamos as funções para poder alternar entre a visualização convencional do mapa e o Streer View, vamos ver como são:
função showMap () {streetView.setVisible (false); } função showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Fechamos as tags correspondentes e adicionamos a parte do código HTML para completar nosso exemplo:
Mapa com Street View
6- Rodamos nosso exemplo no navegador e pressionamos o botão Mostrar Street View para visualizar a funcionalidade como podemos ver na imagem a seguir:
PROLONGAR
Com isso encerramos este tutorial, pois pudemos apreciar os serviços presentes no API Javascript do Google Maps Permitem-nos alargar muito mais as funcionalidades dos nossos mapas, posicionando-os como uma opção a ter em consideração nos sistemas que implementamos que necessitem de cálculos de localização e tempo e / ou distância.
Lembro a você este tutorial, que também será útil: Aprenda o uso de vetores no Google MapsGostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
