Acompanhamento de geolocalização do Google Maps em tempo real com JavaScript
Atualizamos este tutorial com o SDK de JavaScript atualizado e a API do Google Maps. Confira aqui.
Os artigos sobre os serviços do passeio-partilha mancharam cada blog da tecnologia no Internet. Mas tente fazer uma pesquisa rápida sobre a tecnologia por trás desses aplicativos móveis. O feed RSS da Techcrunch sobre o ride-sharing parece concentrar-se exclusivamente nos aspectos comerciais. Embora o lado do negócio pode ser emocionante, o que sobre a tecnologia!
Este é o lugar onde a geolocalização, a Internet das Coisas (IoT), e em tempo real se encontram.
Imagine que você precisa construir uma solução de transporte. Como você gerenciaria a comunicação de milhares de dispositivos? Haveria milhões de mensagens pulsando através da Internet das Coisas! Deixe o PubNub cuidar dessa parte. Em vez disso, concentre-se em salvar o mundo dos transportes.
Visão geral do Tutorial
Todo o código-fonte para o projeto está disponível aqui para download . Na nossa parte anterior, começamos com a transmissão de dados de geolocalização usando os serviços de localização em HTML5 . Recomendamos verificar isso também!
Este artigo incidirá sobre como receber e exibir dados de geolocalização em tempo real usando a API do Google Maps. Você também aprenderá a criar um caminho de vôo, que é um desenho de linha no mapa. Esta entrada foca em uma implementação HTML5. Nota: há soluções que convertem seus aplicativos da Web em aplicativos para dispositivos móveis.
Você está pronto para conectar o mundo, com um escopo de mapas para a Internet das Coisas? Vamos!
Configurar o básico
Existem apenas duas dependências sendo usadas.
| < Script src = " http://cdn.pubnub.com/pubnub-3.7.1.min.js " > </ script > | |
| < Link rel = " stylesheet " | |
| href = " //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css " > | |
| < Script src = " https://maps.googleapis.com/maps/api/js?v=3.exp " > </ script > |
- PubNub é usado para streaming de dados em tempo real
- O Bootstrap é usado para estilizar
- O Google Maps é utilizado para a sua API de mapa
O Google Maps é semelhante a outras manipulações DOM de tela. Criar uma altura para o contentor, definir um id para o contentor e, em seguida, adicionar visuals para o objecto instanciado. Para um aplicativo do Google Maps simples, consulte "oi mundo" .
Se você completar esse aplicativo, você deve ter um mapa que se concentra em Sydney, Austrália. Eu recomendo usar esta versão do script para seus testes. Ele não requer uma chave de API.
As chaves da API são para aplicativos para que o Google possa acompanhar o uso.
| < Script src = " https://maps.googleapis.com/maps/api/js?v=3.exp " > </ script > |
Para executar o aplicativo, você pode usar:
python -m SimpleHTTPServer. Você também pode usar qualquer outro servidor web.
Por exemplo, o editor de desenvolvedores do Google Chrome possui um servidor web integrado. Isso permite que você inicie o aplicativo no navegador com apenas alguns cliques. Se você tiver feito isso até agora, parabéns! Agora você tem um aplicativo do mundo hello simples que pode ser exibido no navegador.
Definir um local padrão
Você deve definir um local padrão para seu aplicativo. Que tal você usar sua própria localização? HTML5 tem suporte geolocalização. Isso significa que os navegadores modernos podem encontrar sua localização por seu endereço IP. Consulte este link para obter informações detalhadas. Este é o snippet básico do código que exibirá suas coordenadas no console de dev de seu navegador.
| Var lat = null ; | |
| Var lng = null ; | |
| // define sua localização como padrão | |
| se ( navegador . geolocalização ) { | |
| navegador . Geolocalização . GetCurrentPosition ( function ( posição ) { | |
| Var locationMarker = null ; | |
| se (locationMarker) { | |
| // retornar se houver um bug locationMarker | |
| Retorno ; | |
| } | |
| Lat = posição . Coords [ " latitude " ]; | |
| Lng = posição . coords [ " longitude " ]; | |
| Console . Log (lat, lng); | |
| }, | |
| Função ( erro ) { | |
| Console . Log ( " Erro: " , erro); | |
| }, | |
| { | |
| EnableHighAccuracy : true | |
| } | |
| ); | |
| } |
API do Google Maps
Agora que você encontrou sua localização, é hora de adicionar a funcionalidade do mapa. Em "gmapExample.html" uma tag de estilo foi adicionada. Define a altura da tela. Faça o download do gmapExample.html aqui .
| < Style > | |
| Html , body , # map-canvas { | |
| Altura : 700 px ; | |
| Margem : 0 px ; | |
| Preenchimento : 0 px | |
| } | |
| </ Style > |
Um div é adicionado ao corpo com o id de "map-canvas". Isso permite que você exibir em que div.
| < Div id = " map-canvas " > </ div > |
Isso deve parecer muito semelhante ao "hello world" app mencionado anteriormente na entrada do blog. Em seguida, você precisa adicionar alguma funcionalidade em tempo real. Integrando o PubNub Crie uma função que envolva os métodos PubNub.
Em seguida, vamos inicializar PubNub. Para obter suas chaves exclusivas de pub / sub, primeiro você precisa se inscrever para uma conta do PubNub . Depois de se inscrever, você pode obter suas chaves exclusivas PubNub no PubNub Developer Dashboard . Nossa camada Sandbox gratuita deve oferecer a você toda a largura de banda necessária para criar e testar seu aplicativo de mensagens com a API de mensagens da Web.
| Pubnub = PUBNUB . Init ({ | |
| Publish_key : ' publish_key ' , | |
| Subscribe_key : ' subscribe_key ' | |
| }) |
Assine o canal "mymaps" e ouça as informações de coordenadas.
| Pubnub . Inscrever-se ({ | |
| Canal : " mymaps " , | |
| Mensagem : função ( mensagem , canal ) { | |
| Console . Registro (mensagem) | |
| Lat = message [ ' lat ' ]; | |
| Lng = mensagem [ ' lng ' ]; | |
| // método personalizado | |
| Redesenhar (); | |
| }, | |
| Connect : function () { console . Log ( " PubNub Conectado " )} | |
| }) |
Volte para o início "se" declaração. Certifique-se de chamar o método.
Use a parte de transmissão do aplicativo de exemplo para enviar coordenadas.
Você deve ser capaz de ouvir informações de coordenadas no console.
Como mover o mapa
A próxima parte envolve obter o mapa para centralizar e mover com as informações de localização enviadas através PubNub. Na inicialização do mapa, você deve centrar seu mapa nas variáveis "lat" e "lng". Em seguida, defina um marcador no mesmo local.
| map = new google.maps.Map ( documento . getElementById ( ' map-canvas ' ), { | |
| Zoom : 15 , | |
| Center : {lat : lat, lng : lng, alt : 0 } | |
| }); | |
| Map_marker = new google.maps.Marker ({posição : {lat : lat, lng : lng}, map : map}); | |
| Map_marker . SetMap (mapa); |
Crie um método de "redesenho", que move o mapa.
| Função redesenhar () { | |
| mapa . SetCenter ({lat : lat, lng : lng, alt : 0 }) | |
| Map_marker . SetPosition ({lat : lat, lng : lng, alt : 0 }); | |
| } |
Adicione "redesenhar" para a lista de tarefas ao receber uma mensagem.
| Mensagem : função ( mensagem , canal ) { | |
| Console . Registro (mensagem) | |
| Lat = message [ ' lat ' ]; | |
| Lng = mensagem [ ' lng ' ]; | |
| // método personalizado | |
| Redesenhar (); | |
| } |
Caminhos de vôo: siga onde você esteve
Digamos que você deseja rastrear onde você esteve. Isto é simplesmente uma questão de desenhar uma polilinha . Instanciar uma matriz para manter suas coordenadas.
| Var map; | |
| Var map_marker; | |
| Var lat = null ; | |
| Var lng = null ; | |
| Var lineCoordinatesArray = []; |
Em seguida, empurre as coordenadas sempre que uma mensagem é recebida. Adicione esta funcionalidade ao método "redesenhar".
| PushCoordToArray (lat, lng); | |
| Var lineCoordinatesPath = novo google.maps.Polyline ({ | |
| Path : lineCoordinatesArray, | |
| geodésica : verdade , | |
| StrokeColor : ' # 2E10FF ' , | |
| StrokeOpacity : 1.0 , | |
| StrokeWeight : 2 | |
| }); | |
| LineCoordinatesPath . SetMap (mapa); |
Lá você tem! Agora você deve ser capaz de rastrear as informações de localização enviadas pelo canal mymaps. Também irá desenhar uma linha para indicar onde o marcador foi. As possibilidades são ilimitadas com geolocalização e PubNub!
Leia Mais: JavaScript , Mapas e Geolocalização , IoT - Transporte - Despacho e Rastreamento , GoogleMaps API
Categorias: Tutoriais e Demonstrações
O PubNub Data Stream Network abastece milhares de aplicativos, transmitindo 1,9 trilhão de mensagens para mais de 330 milhões de dispositivos por mês.
Pilha
Casos de Uso
Assine a nossa newsletter
Categorias
Experimente o PubNub hoje
Conecte até 100 dispositivos para Free
Comentários
Postar um comentário