1. Introdução
A API JavaScript do Baidu Map é um conjunto de interfaces de programação de aplicativos escritas em linguagem JavaScript. Ele pode ajudá-lo a criar aplicativos de mapas altamente interativos e ricos em recursos em seu site. Inclui várias interfaces para criar funções básicas de mapas e fornece serviços como pesquisa local ., planejamento de rotas e outros serviços de dados.
Funções básicas do mapa: exibição (suporta mapas 2D, mapas 3D, mapas de satélite), panorâmica, zoom, arrastar, etc.
Função de exibição de controle de mapa: você pode adicionar/excluir olho de águia, barra de ferramentas, escala, direitos autorais personalizados, tipo de mapa e controles de posicionamento no mapa e definir a posição de exibição de vários controles.
Função de cobertura: suporta adição/exclusão de pontos, linhas, áreas, pontos críticos, divisões administrativas, coberturas definidas pelo usuário, etc. no mapa; a biblioteca de código aberto fornece funções como anotação rica, gerenciador de anotações, marcadores de agregação e sobreposições personalizadas .
Funções da ferramenta: fornece funções para converter coordenadas de latitude e longitude em coordenadas de tela; a biblioteca de código aberto fornece funções como alcance, operações geométricas e conversão de coordenadas GPS/coordenadas do National Bureau of Surveying em coordenadas Baidu.
Função de posicionamento: Suporta posicionamento IP e função de posicionamento do navegador (suporta navegador de recursos HTML5).
Função de menu do botão direito: Suporta a adição de menu do botão direito no mapa.
Função de interação do mouse: suporta modificação dinâmica do estilo do mouse, arrastar/zoom de mapas, desenho do mouse e outras funções.
Função de camada: suporta a redefinição do mapa base do mapa, a sobreposição de camadas de tráfego em tempo real no mapa ou a personalização de funções de camada.
Função de pesquisa local: incluindo pesquisa de POI com base na cidade, faixa retangular, faixa circular e outras condições; e suporta recuperação de dados de propriedade do usuário.
Pesquisa de transporte público: suporta pesquisa com três condições de pesquisa: coordenadas do ponto de partida, nome do ponto de partida e instância LocalSearchPoi; os resultados da pesquisa suportam quatro opções: conveniente, transferível, menos caminhada e sem metrô.
Recuperação de direção: suporta a recuperação de três condições de pesquisa: coordenadas do ponto de partida, nome do ponto de partida e instância LocalSearchPoi; retorna resultados de navegação de direção com o tempo mais curto, a distância mais curta e evitando rodovias; e fornece serviços para calcular tarifas de táxi.
Navegação a pé: forneça soluções de navegação a pé.
Reverso/Geocodificação: Suporta serviços de conversão entre coordenadas Baidu e informações de descrição de endereço.
Função de exibição de dados personalizada: Depois que os próprios dados do usuário são armazenados na nuvem LBS., a API JavaScript pode fornecer a função de exibir os próprios dados na forma de diagramas pockmark.
2. Introdução de mapas
Criou um mapa com Tiananmen como centro do mapa: ( Você precisa ir ao site oficial para obter a chave secreta)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥">
//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>Analise o papel de cada parte:
Preparar página
De acordo com o padrão HTML, todo documento HTML deve declarar o tipo de documento correto. Recomendamos que você use a declaração de documento mais recente que esteja em conformidade com a especificação HTML5:
<!DOCTYPE html> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
A seguir definimos o estilo para que o mapa preencha toda a janela do navegador:
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>Para fazer referência aos arquivos da API do mapa do Baidu, use o método de referência da V1.4 e versões anteriores:
Criar um elemento contêiner de mapa O mapa requer um elemento HTML como contêiner para que possa ser exibido na página. Aqui criamos um elemento div.
A API de namespace usa BMap como namespace e todas as classes estão nesse namespace, como: BMap.Map, BMap.Control e BMap.Overlay.
Crie uma instância de mapa
var map = new BMap.Map("container");
A classe Map localizada no namespace BMap representa um mapa e uma instância de mapa pode ser criada por meio do operador new. Seu parâmetro pode ser um ID de elemento ou um objeto de elemento.
Observe que ao chamar esse construtor você deve garantir que o elemento contêiner foi adicionado ao mapa.
Criar coordenadas de ponto
var point = new BMap.Point(116.404, 39.915);Aqui usamos a classe Point no namespace BMap para criar um ponto de coordenadas. A classe Point descreve um ponto de coordenadas geográficas, onde 116.404 representa longitude e 39.915 representa latitude.
Inicialização do mapa
map.centerAndZoom(point, 15);
Depois de criar a instância do mapa, precisamos inicializá-la. O método BMap.Map.centerAndZoom() requer a configuração das coordenadas do ponto central e do nível do mapa. O mapa deve ser inicializado antes que outras operações possam ser executadas.
Configuração e operação do mapa
Depois que o mapa for instanciado e inicializado, você poderá interagir com ele. A aparência e o comportamento dos objetos do mapa na API são muito semelhantes aos mapas interagidos no site do Baidu Map. Ele suporta funções interativas, como arrastar o mouse, aplicar zoom com roda e clicar duas vezes para aumentar o zoom. Você também pode modificar a configuração para alterar esses recursos. Por exemplo, por padrão, o mapa não suporta a operação de zoom da roda do mouse, porque isso pode afetar a experiência do usuário em toda a página, mas se você quiser usar a roda do mouse para controlar o zoom no mapa, poderá chamar o mapa Método .enableScrollWheelZoom para habilitá-lo. As opções de configuração podem ser encontradas na seção Métodos de configuração da referência da classe Map.
Além disso, você pode interagir com o mapa de forma programática. A classe Map fornece vários métodos para modificar o estado do mapa. Por exemplo: setCenter(), panTo(), zoomTo(), etc.
O exemplo abaixo mostra um mapa que espera dois segundos antes de passar para um novo ponto central. O método panTo() moverá suavemente o mapa para o novo ponto central. Se a distância do movimento exceder o tamanho atual da área do mapa, o mapa irá direto para esse ponto.
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);3. Desenho de efeito
