A aplicação do posicionamento geográfico HTML5 e do mapa da Terceira Tool Baidu

Vi muitos blogs técnicos e relacionados, e raramente descrevi o posicionamento geográfico do HTML5.

Primeiro, o motivo dos provedores de serviços, porque o posicionamento do HTML5 é fornecido pelo Google, porque o Google bloqueou o continente, a função de posicionamento não é suportada.

Segundo, o posicionamento geográfico vem com o HTML5 tem um desempenho ruim.

Como o posicionamento geográfico é um novo recurso do HTML5, também precisamos aprender e dominar as APIs relacionadas e aprender a usar o posicionamento geográfico

Primeiro entenda o senso comum

Uma nova geologia do substantivo:

É usado para obter as coordenadas geográficas onde o navegador atual está localizado, de modo a fornecer LBS (Serviços baseados em localização). dados:

Meridez: longitude

Latitude: Latitude

Altitude: Altitude

Velocidade: velocidade

Use a plataforma para ser dividida em Mobile e PC final:

(1) navegador móvel:

Primeiro, tente usar a precisão de dados GPS integrados é baseada em arroz

Em seguida, use o número da estação base móvel para reverter a precisão correspondente de posição geográfica de localização está na unidade

(2) navegador de PC:

Consulta reversa através do endereço IP do computador

Tópico:

Primeiro de tudo, pressionamos o F12 para abrir o console no navegador e entrar no window.navigator.geology para ver as informações de posicionamento!

Vemos que existem três métodos principais nas informações de posicionamento, e o significado é:

 GetCurrentPosition: fn (succ, err) // Obtenha os dados de posicionamento atuais, que contêm o relógio, que é bem -sucedido e falhou em obter e falha.

Desde então, sabemos como usar o posicionamento geográfico no arquivo HTML5.

 <! {// Clique no botão para acionar o Navigator.geolocation.getCurrentposition (succcb, errcb); Interseção Console.Log ('Obtenção de Dados de Posicionamento'); '+Pos.coords.altitude); Interseção console.log ('Obtenha os dados de posicionamento falhado'); }} </script> </body> </html>

Conforme mostrado na figura, quando o botão de clique, os dados de posicionamento são obtidos com sucesso, mas a altura e a velocidade são nulos por causa do lado do PC; portanto, precisamos apenas lembrar de um método para obter o posicionamento geográfico no HTML5!

 Navigator.geolocation.getCurrentPosotion (function (pos) {console.log ('' Aquisição de dados de localização bem -sucedida '); // pos.coords.longtitude ....} (err) {console.log (' 'Aquisição de dados de posicionamento falha ');

Como mencionei no prefácio, o uso de mapas Baidu no projeto e muitos aplicativos móveis fornece aos usuários para selecionar as informações de posicionamento.

Primeiro, precisamos saber que o código -fonte do mapa do Baidu não será baixado para todos. Uma empresa de consciência.

Use etapas:

Primeiro abra o site oficial http://lbsyun.baidu.com/ e depois puxe -o para o fundo:

Pode -se ver que o mapa do Baidu pode ser usado para desenvolvimento da Web, desenvolvimento do Android, desenvolvimento do iOS.

URL: http://lbsyun.baidu.com/index.php?

Podemos ir a muitos casos e exibir a exibição da API.

Vou explicar qual é a chave posteriormente. Digite o telefone celular relacionado, a caixa de correio e verifique na caixa de correio. Depois que a verificação for bem -sucedida, clique para criar um aplicativo, a seguinte interface aparecerá:

Preencha o nome do aplicativo à vontade

Seleção do tipo de aplicativo --- Navegador Nide

Lista de referentes: refere -se a quem pode acessar seu aplicativo, como você pode acessar seu aplicativo em como acessá -lo e preencher um número de estrela ' *' aqui, o que significa que todas as pessoas podem acessá -lo, porque apenas os testes podem ser feitos, E o projeto pode ser feito no futuro. Interseção Em seguida, clique em Enviar para concluir a criação! Interseção

Após a criação do aplicativo, a seguinte interface aparece:

Aqui ele mostrará o número do aplicativo, o nome do aplicativo e o código de aplicativo de acesso mais importante criado aqui, que é a chave mencionada anteriormente!

Depois de receber a chave, retornamos à página inicial http://lbsyun.baidu.com/index.php?title=jSpopular

Clique no guia de desenvolvimento à esquerda, você pode ver o uso de APIs e casos relacionados! Interseção Esta API é a maior consciência da API, não há bobagens,

A escrita é muito detalhada e fácil de entender, porque há muitos, apenas introduz alguns usos principais aqui! Interseção Interseção

Criamos um novo arquivo HTML e copiamos o código acima para o arquivo HTML

 <! = jrbp iu6jcbpsxgvdqxac0c. Versão anterior e método de referência de versão anterior: src = http://api.map.baidu.com/api? Altura: 500 px; Instância do mapa para evitar peso pesado com o nome do mapa, então use bmap.map var map = novo bmap.map (contêiner); Coordenadas do ponto central e níveis de mapa 1 ~ ~ Nível 18 Map.CentendZoom (Point, 18); ); corpo> </html>

Use o mapa Baidu:

OK, usamos com sucesso os mapas Baidu no arquivo HTML. Interseção

Descrição da função relacionada:

 <script src = http://api.map.baidu.com/api?

Digite a longa chave de tronco no AK para citar o mapa do Baidu! Interseção

Crie uma instância de mapa-must-must seja selecionada.

var map = new bmap.map (contêiner);

Crie um ponto especificado, suas informações de latitude e longitude! Interseção Se você não sabe, você pode usar o anterior

Navigator.Geology.GetCurrentPosotion Método para obter latitude e longitude-p-MUST.

Var Point = new Bmap.Point (116.300982.39.915907);

Os números dos mapas de exibição no ponto centrado como o centro, 17 refere -se ao nível, e o nível pode ser dividido no nível 1 a 18. Quanto menor o nível do nível, maior o alcance do mapa e maior o nível do nível. Interseção --- Must-escolhido.

map.CenteRandzoom (Point, 17);

O mapa pode ser selecionado com a opção de mouse.

map.enablescrollwheelzoom (true);

O mapa mostra o controle-o efeito é testado por si só.

 map.addcontrol (novo bmap.navigationControl ());

Mostre uma gravadora no mapa (etiqueta) -Optional

var marker = map.addoverlay (new bmap.marker (ponto));

Ok, o mapa do terceiro parto é dito aqui, há muitas funções divertidas que podem ser usadas por si mesmas, para que os métodos e parâmetros possam ser encontrados na API!

O acima é todo o conteúdo deste artigo.