Índice
Os mapas gerados com o API Javascript do Google Maps Nem sempre serão estáticos, embora sejam usados na maioria das vezes para visualização, nem sempre é o caso, por isso às vezes haverá ocasiões em que precisaremos expandir seu escopo para que possam mostrar informações adicionais neles.Essas informações adicionais que precisamos incluir são obtidas com o vetor que nada mais são do que formas consistindo de pontos, onde todos os tipos de vetores usados pelo API Eles são chamados sobreposições ou sobreposição.
RecomendaçãoEm tutoriais anteriores, vimos a introdução a API, revisamos as opções mais importantes, aprendemos como obter as credenciais para desenvolvedores de Google e realizamos alguns exemplos simples de sua utilização, portanto antes de ler o conteúdo deste tutorial ou fazer os exemplos aqui mencionados, recomendamos dar uma olhada neste tutorial.
Tendo percorrido o tutorial recomendado e estando dentro do contexto, vamos passar aos exemplos práticos, isto para um melhor entendimento do uso de vetores em nossos mapas gerados com a API.
O uso dos mapas gerados com o API é mais frequentemente concentrado em sites onde sua função principal é mostrar a localização de uma empresa ou negócio. Podemos chamar isso de ponto de interesse que podemos representá-lo sem qualquer problema com um tipo de vetor, que para efeitos do API Javascript do Google Maps é conhecido como marcador.
Sem mais delongas, vamos ver as etapas que devemos seguir para implementar um marcador padrão e, adicionalmente, um personalizado em nosso mapa.
1- A primeira coisa que devemos fazer é incluir o API e os estilos de visualização do nosso mapa, é importante notar que devemos usar o nosso Credencial de desenvolvedor do Google para o correto funcionamento deste exemplo:
2- Definimos nossas variáveis globais, um chamado mapa e uma série de variáveis que usaremos para gerar marcadores aleatórios de acordo com as coordenadas que circundam a área de Madrid.:
var map; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1;
3- Em seguida, definimos a função de inicialização do nosso mapa, que conterá as opções mais importantes para ele como zoom, tipo de base para mapa e coordenadas centrais que neste caso serão os de Madrid, nós pegamos o EU IA do div pelo SOL, inicializamos o mapa e definimos uma função para manipular os eventos quando posicionamos os marcadores no mapa, vamos dar uma olhada no segmento de código que acabamos de descrever:
função initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); eventsMarker (); } 4- Agora devemos construir nossa função eventsMarker () que terá em sua definição dois eventos vinculados por clique de acordo com o ID que se pressiona a partir de dois links distintos e que chamará mais duas funções que se encarregarão de definir os favoritos:
functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('click', function () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('click', function () {addPersonMarker ();}); } 5- Antes de construir as duas funções que definirão os marcadores, é importante trabalharmos nas coordenadas para que nos forneçam valores aleatórios nesse intervalo e possam ser interpretados pelo API Javascript do Google Maps, faremos isso com algumas operações aritméticas nas variáveis globais das coordenadas, vamos ver a função correspondente:
função createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random (); var newLng = minLng + rndNumLng * deltaLng; retornar novo google.maps.LatLng (newLat, newLng); } 6- Feito isso, podemos construir nossas funções para fixar os marcadores em nosso mapa, para isso fazemos com o método Marcador Para gerar um marcador padrão e com a função anterior, geramos a coordenada aleatória onde será exibida:
função addMarker () {var coordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); marcadorId ++; } Antes de passar para o nosso marcador personalizado É importante referir que se baseia em ícones e estes devem estar disponíveis no directório do nosso projecto, para este exercício foram utilizados alguns dos ícones gratuitos disponíveis na página de mapas na categoria marcadores, então eles vão funcionar para nós sem nenhum problema, para isso baixamos alguns e os colocamos em uma pasta chamada img localizado na raiz do nosso projeto, como podemos ver na imagem a seguir:
PROLONGAR
function addPersonMarker () {var markerIcons = ['quadrinhos', 'videogames', 'computadores', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); coordenar var = createLaLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, icon: 'img /' + markerIcons [rndMarkerId] + '.png.webp', title: 'Random Marker -' + markerId}); marcadorId ++; } 8- Por fim, adicionamos o evento para inicializar nosso mapa e criamos dois links antes de nosso div com os IDs que definimos para nossos eventos que chamarão as funções correspondentes:
google.maps.event.addDomListener (window, 'load', initializeMap); Adicionar favoritos
Adicionar marcador | Adicionar marcador personalizado
Com isso já temos nosso mapa com a funcionalidade de poder adicionar marcadores padrão Y personalizadas De acordo com o que selecionamos, é importante mencionar que podemos adicionar quantos favoritos quisermos, isso nos permitirá ver o funcionamento da API, para finalizar vamos ver como fica quando a rodamos em nosso navegador:
PROLONGAR
1- Vamos criar um novo arquivo add_popup.html e usaremos o exemplo anterior como base para inserir as novas funcionalidades, para isso copiamos e colamos o código do nosso mapa e vamos localizar a função initializeMap () onde depois de obter o ID vamos definir o pop-up para o centro de nosso mapa com o método InfoWindow, vamos ver o código para a funcionalidade acima mencionada:
var infowindow = new google.maps.InfoWindow ({content: 'Conteúdo pop-up:
Este pop-up mostra o centro do mapa, que é Madrid', posição: new google.maps.LatLng (40.41678, -3,70379)}); infowindow.open (mapa); 2- Agora vamos modificar nossa função addMarker () para adicionar um pop-up a cada marcador que apareça em nosso mapa, para isso usaremos a função novamente InfoWindow () e adicionaremos um evento para a variável que definimos com a instância do método, vejamos:
função addMarker () {var coordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (marcador, 'clique', função () {infowindow.open (mapa, marcador);}); marcadorId ++; } 3- Depois de fazer isso, vamos ver a aparência do nosso mapa com a funcionalidade do pop-up que acabamos de incluir:
PROLONGAR
PROLONGAR
Já testamos o poder dos vetores, mostrando os pontos de interesse em um mapa com o marcadoresNo entanto, podemos usar vetores para desenhar linhas e mostrar a rota entre dois pontos em nosso mapa, vamos ver como fazemos isso:
1- Vamos criar um arquivo chamado add_line.html e vamos incluir nossa API, bem como os estilos do primeiro exemplo, agora vamos definir as coordenadas que vão de Madrid para Barcelona, vamos ver:
coordenadas var Line = [[40.41678, -3,71379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41,3833,2,1833]];
2- Antes de passar para a função de inicialização do nosso mapa, vamos primeiro criar a função addLine () onde a primeira coisa que vamos fazer é iterar sobre a matriz de coordenadas e criar uma nova matriz que conterá um objeto do tipo LatLng, vamos ver:
função addLine () {var pointCount = coordinateLine.length; var linePath = []; para (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 3- Em seguida, definimos as propriedades de nossa linha, como cor, opacidade e espessura. Depois de fazer isso, só precisamos enviar para o método Polilinha as opções como um parâmetro e defina a variável polilinha para o mapa atual:
var lineOptions = {path: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (map); } 4- Por fim, criamos nossa função bem conhecida initializeMap () e em vez de ter uma função chamada MarkerEvents no final dela, vamos substituir esta linha pelo nome da nossa função addLine (), criamos nosso HTML e o executamos em nosso navegador, deve ser assim:
PROLONGAR
Isso pode parecer bastante complicado, mas não é, com a ajuda das classes e métodos do API Podemos resolvê-lo com algumas linhas de código, vamos ver como fazemos isso:
1- A primeira coisa é incluir nosso API, nossos estilos e definimos nossas variáveis globais, usamos as mesmas coordenadas do exemplo anterior para usar o mesmo caminho, além disso, definimos a variável polilinha global para poder usá-lo em todo o escopo de nosso Javascript:
var map; var polyline; coordenadas var Line = [[40.41678, -3,71379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41,3833,2,1833]];
2- Agora criamos nossa função addAnimatedLine () que terá uma estrutura semelhante à função addLine () A partir do exemplo anterior, entretanto, esta função terá a definição do símbolo que usaremos para mostrar o objeto em movimento entre esses dois pontos, para este caso usaremos uma seta:
var arrowSymbol = {strokeColor: '# 000', escala: 3, caminho: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 3- Finalmente, só temos que definir esta variável para a opção ícones a partir da definição da linha:
var lineOptions = {path: linePath, icons: [{icon: arrow symbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 4- Feito isso, só precisamos animar nosso ícone e fazemos isso na função chamada animateArrow () que devemos incluir no final da definição da função addAnimatedLine () Vamos ver o que a função contém:
função animateArrow () {contador de var = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); flechas [0] .offset = (counter / 2) + '%'; polyline.set ('ícones', setas);}, 50); } 5- Para finalizar inicializamos nosso mapa como já conhecemos e chamamos nossa função addAnimatedLine ()Vamos ver ao executar como fica em nosso navegador, é importante mencionar que a seta tem o efeito de se mover de um ponto a outro:
PROLONGAR
