Comentário: Este artigo apresenta principalmente o exemplo do posicionamento HTML5 e exibindo -o no mapa Baidu. Amigos que precisam podem se referir a ele.
Ao desenvolver Web Mobile ou WebApps, ao usar a API do Baidu Map, geralmente é necessário obter o local atual através do posicionamento do telefone celular e exibi -lo no centro no mapa, o que requer o uso da função de geolocalização do HTML5.
Navigator.geolocation.getCurrentPosition (retorno de chamada);
Depois que as coordenadas forem obtidas com sucesso, o retorno da função de chamada será executado; O parâmetro do método de retorno de chamada são os pontos de coordenadas obtidos; Em seguida, o mapa pode ser inicializado, os controles, pontos centrais e níveis de zoom podem ser definidos e, em seguida, a sobreposição do ponto é adicionada ao mapa:
var map = new bmap.map ("mapDiv"); // mapDiv é o id da div que coloca o mapa
map.addControl (new bmap.navigationControl ());
map.addControl (new bmap.scaleControl ());
map.addControl (new bmap.overviewMapControl ());
map.CenteRandzoom (Point, 15); // Ponto é o ponto de coordenada, 15 é o nível de zoom do mapa, o nível máximo é 18
var pointmarker = new bmap.marker (ponto);
map.addoverlay (PointMarker);
No entanto, na verdade, isso não é suficiente e os resultados exibidos não são precisos. Isso ocorre porque as coordenadas obtidas pelo GetCurrentPosition são coordenadas de latitude e longitude do GPS, e as coordenadas do mapa do Baidu são especialmente convertidas. Portanto, é necessária uma etapa da conversão de coordenadas entre a obtenção de coordenadas de posicionamento e a inicialização do mapa. Esse método de conversão já é fornecido na API do Baidu. O método de conversão de uma substituição de ponto ou lote é fornecido: uma conversão de ponto único requer referência e uma conversão em lote requer referência. Aqui, apenas o primeiro é necessário:
Bmap.convertor.translate (gpspoint, 0, retorno de chamada);
// GPSPOint: as coordenadas antes da conversão, o segundo parâmetro é o método de conversão, 0 significa que a coordenada do GPS é convertida em coordenadas de Baidu, a função de retorno de chamada, o parâmetro é o novo ponto de coordenada
O código detalhado do exemplo é o seguinte: (O AK na citação é a chave para a chave para)
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta content = "em escala inicial = 1,0, scalable = não" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> </title>
<style type = "text/css">
*{
Altura: 100%; // Defina a altura, caso contrário, não será exibida
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type = "text/javaScript" src = "http://api.map.baidu.com/api?v=2.0&ak=················> </script>
<script type = "text/javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<Cript>
$ (function () {
Navigator.geolocation.getCurrentPosition (TradlatePoint); // posicionamento
});
Função traduzpoint (posição) {
var currentlat = position.coords.latitude;
var currentlon = position.coords.longitude;
var gpSpoint = new Bmap.point (currentlon, currentlat);
Bmap.convertor.translate (gpspoint, 0, initmap); // Converter coordenadas
}
função initmap (ponto) {
// Inicialize o mapa
map = new bmap.map ("map");
map.addControl (new bmap.navigationControl ());
map.addControl (new bmap.scaleControl ());
map.addControl (new bmap.overviewMapControl ());
map.centerndzoom (Point, 15);
map.addoverlay (new bmap.marker (ponto))
}
</script>
</head>
<Body>
<div> </div>
</body>
</html>
Durante o processo de desenvolvimento, sinto que a velocidade de posicionamento do computador é um pouco lenta e geralmente não consigo obter coordenadas, para que o mapa não possa ser exibido. Recomenda -se usar um telefone celular para testá -lo e o posicionamento é mais rápido.
Obviamente, se você desenvolver apenas páginas da web móveis, não precisará usar o jQuery. A estrutura é muito grande, você pode alternar para outras estruturas JS móveis leves.