O projeto exige que a versão da Web do mapa Baidu seja desenvolvida offline. Aqui está um resumo do seu próprio processo de desenvolvimento e experiência.
O requisito aproximado é: cada carro está equipado com um receptor da empresa, que fará comentários as coordenadas, velocidade, direção e outras informações do veículo em tempo real e, após receber as informações de cada veículo, a localização do veículo é desenhada no mapa do Baidu em tempo real. Os pontos de trabalho não têm necessariamente redes, portanto, é necessário o desenvolvimento offline.
Existem três pontos técnicos principais nesse processo:
1. Como obter API offline
2. Como obter diagramas de ladrilhos offline
3. Como converter coordenadas WGS para coordenadas do mapa do Baidu quando offline
Processo de resolução de problemas:
1. Como o Baidu Maps não suporta mapas offline, precisamos encontrar uma maneira de alterar o código on -line para o código offline.
Aqui você pode se referir a: http://my.oschina.net/smzd/blog/548538
Eu compilei uma cópia aqui e também escrevi uma demonstração offline de acordo com a demonstração de exemplo. Obviamente, o offline não pode ser tão perfeito quanto online, afinal, algumas funções ainda são inutilizáveis. (Esta versão é baseada no Baidu Maps API v2.0)
Como usar:
1. Determine o sufixo da imagem do ladrilho que você usa, como .png, .jpg. Modifique o IMGEXT em Baidumap_Offline_v2_load.js
var bdmapcfg = {'imgext': '.2. Determine o diretório do ladrilho que você usa. Por padrão, ele está no Baidumap_v2/ Tiles/ Directory e você também pode alterá -lo para outro endereço. Modificar tiles_dir em Baidumap_Offline_v2_load.js
3. Consulte a demonstração para escrever código, os principais pontos são os seguintes:
1) Basta carregar o arquivo de carga
<script type = "text/javascript" src = "Baidumapv2/Baidumap_offline_v2_load.js"> </sCript>
2) Carregue o arquivo CSS (parece não necessário)
<link rel = "Stylesheet" type = "text/css" href = "../../ Baiduumapv2/css/Baidu_map_v2.css"/>
3) Defina um recipiente para colocar o mapa e usar CSS para controlar a altura e a largura
<div id = "map_demo"> </div>
4) Escreva o código JS
<script type = "text/javascript"> // função da api mapa baidu var map = new bmap.map ("map_demo"); // Crie mapa da instância do mapa.CenterAndZoom (New Bmap.Point (116.404, 39.915), 8); // Inicialize o mapa, defina as coordenadas do ponto central e o nível do mapa //map.addcontrol(new bmap.maptypecontrol ()); // Adicione o controle do tipo de mapa para suportar apenas mapas eletrônicos offline e o satélite/3D não suporta //map.setCurrentCity("beijing "); // Defina mapas offline exibidos pelo mapa não suportam! ! map.enablescrollwheelzoom (true); // Abra a roda do mouse para o Zoom Map.addControl (new Bmap.navigationControl ()); // botão de escala </sCript>2. Pegue o diagrama de ladrilhos
Aqui você pode se referir a: http://my.oschina.net/smzd/blog/619397
Obviamente, também existem ferramentas de download online, como: Downloader em mapa eletrônico geral
3. É tendencioso colocar diretamente as coordenadas (WGs) recebidas pelo receptor no mapa do Baidu, porque o mapa do Baidu fez tratamentos especiais para a segurança. Sua API de serviço da Web fornece uma API de conversão de coordenadas, mas é uma interface de conversão de coordenadas fornecida no HTTP, para que ainda não possa ser separada da rede. Aqui, usamos algum conhecimento profissional para converter coordenadas do WGS em GCJ e depois converter coordenadas do GCJ para as coordenadas do BD Baidu. A precisão da verificação é quase precisa.
classe pública coorconvertutil {// Pi estático duplo PI = 3.14159265358979324; // fator de projeção do elipsóide de satélite Projeção de coordenadas ao sistema de coordenadas planas duplo estático a = 6378245.0; // excentricidade do elipsóide estático duplo EE = 0,00669342162296594323; // Valor da conversão PI Public final estático duplo x_pi = 3.14159265358979324 * 3000.0 /180.0; public estático duplo [] wgs2bd (duplo lat, duplo lon) {duplo [] wgs2gcj = wgs2gcj (lat, Lon); duplo [] gcj2bd = gcj2bd (wgs2gcj [0], wgs2gcj [1]); retornar gcj2bd; } / ** * GCJ coordena para coordenadas Baidu * @param lat * @param Lon * @return * / public static duplo [] gcj2bd (duplo lat, duplo lon) {duplo x = Lon, y = lat; duplo z = math.sqrt (x * x + y * y) + 0,00002 * math.sin (y * x_pi); dupla teta = math.atan2 (y, x) + 0,000003 * math.cos (x * x_pi); duplo bd_lon = z * math.cos (teta) + 0,0065; duplo bd_lat = z * math.sin (teta) + 0,006; retornar novo duplo [] {bd_lat, bd_lon}; } public static duplo [] bd2gcj (duplo lat, duplo lon) {duplo x = LON - 0,0065, y = lat - 0,006; duplo z = math.sqrt (x * x + y * y) - 0,00002 * math.sin (y * x_pi); dupla teta = math.atan2 (y, x) - 0,000003 * math.cos (x * x_pi); duplo gg_lon = z * math.cos (teta); duplo gg_lat = z * math.sin (teta); retornar novo duplo [] {gg_lat, gg_lon}; } / ** * WGS coordena as coordenadas do GCJ * @param lat * @param Lon * @return * / public static duplo [] wgs2gcj (duplo lat, duplo lon) {duplo dlat = transformlat (Lon - 105.0, lat - 35.0); duplo dlon = transformlon (LON - 105,0, lat - 35.0); duplo radlat = lat / 180.0 * pi; dupla magia = math.sin (radlat); Magic = 1 - EE * Magic * Magic; duplo sqrtmagic = Math.sqrt (Magic); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (mágica * sqrtmagic) * pi); dlon = (dlon * 180.0) / (a / sqrtmagic * math.cos (radlat) * pi); duplo mGlat = lat + dlat; duplo mglon = LON + DLON; duplo [] loc = {mGlat, mglon}; retornar loc; } private estático duplo transformLat (duplo lat, duplo lon) {duplo ret = -100.0 + 2,0 * Lat + 3,0 * LON + 0,2 * LON * LON + 0,1 * LAT * LON + 0,2 * MATH.SQRT (MATH.ABS (LAT)); ret + = (20,0 * math.sin (6,0 * lat * pi) + 20,0 * math.sin (2.0 * lat * pi)) * 2.0 / 3.0; ret + = (20,0 * Math.sin (Lon * Pi) + 40.0 * Math.sin (LON / 3.0 * PI)) * 2.0 / 3.0; ret + = (160.0 * Math.sin (LON / 12.0 * PI) + 320 * Math.sin (LON * PI / 30.0)) * 2.0 / 3.0; retornar ret; } Transformlon duplo estático privado (Lat Double, duplo Lon) {Double Ret = 300.0 + Lat + 2,0 * Lon + 0,1 * Lat * Lat + 0,1 * Lat * Lon + 0,1 * Math.Sqrt (Math.abs (Lat)); ret + = (20,0 * math.sin (6,0 * lat * pi) + 20,0 * math.sin (2.0 * lat * pi)) * 2.0 / 3.0; ret + = (20,0 * math.sin (lat * pi) + 40,0 * math.sin (lat / 3.0 * pi)) * 2.0 / 3.0; ret + = (150.0 * Math.sin (Lat / 12.0 * pi) + 300.0 * Math.sin (Lat / 30.0 * pi)) * 2.0 / 3.0; retornar ret; } / ** * Divisão de graus e rotação * @param latitude latitude ddmmmmmm * @param Lon Longitude dddmmmmm * @return * / public static duplo [] dufen2du (string lat, string lon) {duplo latd = duplo.parsedouble (lat.substring (0, 2)); duplo latm = duplo.parsedouble (lat.substring (2)); Latnew duplo = LATD+LATM/60; Double Lond = Double.parseDouble (LON.SUBSTRING (0, 3)); duplo long = duplo.parseDouble (LON.SUBSTRING (3)); duplo lonnew = lond+LONM/60; retornar novo duplo [] {latnew, lonnew}; }}Finalmente, observe a captura de tela do efeito do projeto:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.