最全面的百度地图JavaScript离线版开发


Posted in Javascript onSeptember 10, 2016

项目要求web版百度地图要离线开发。这里总结下自己的开发过程和经验。 

大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标、速度、转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置。作业点不一定都有网络,所以要求离线开发。 

此过程主要有三个技术点: 

1. 如何获取离线的API 

2. 如何获取离线瓦片图 

3. 如何在离线状态下将WGS坐标转换成百度地图坐标 

解决问题过程: 

1. 既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码。

这里可以参考:http://my.oschina.net/smzd/blog/548538 

这里整理好了一份,其中也按照示例Demo写了一份离线的Demo。当然离线的不可能做到和在线一样完美,毕竟还是有些功能用不了的。(此版本是基于百度地图API V2.0)

最全面的百度地图JavaScript离线版开发

使用方法: 

1. 确定你用的瓦片的图片后缀,如.png, .jpg。修改 baidumap_offline_v2_load.js 中的imgext

var bdmapcfg = {
 'imgext':'.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
 'tiles_dir':''  //瓦片图的目录,为空默认在 baidumap_v2/tiles/ 目录
};

2. 确定你用的瓦片的目录,默认在baidumap_v2/tiles/目录下,你也可以改成其他地址。修改 baidumap_offline_v2_load.js 中的tiles_dir

3. 参考demo编写代码, 要点如下:

 1)只需要加载load文件
    <script type="text/javascript" src="baidumapv2/baidumap_offline_v2_load.js"></script>
 2)加载css文件(貌似可不需要)
    <link rel="stylesheet" type="text/css" href="../../baidumapv2/css/baidu_map_v2.css"/>
 3)定义个放置地图的容器,并用css控制高度和宽度   
    <div id="map_demo"></div>
 4)书写js代码

<script type="text/javascript"> 
  // 百度地图API功能
  var map = new BMap.Map("map_demo");  // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 8); // 初始化地图,设置中心点坐标和地图级别
  //map.addControl(new BMap.MapTypeControl());  //添加地图类型控件 离线只支持电子地图,卫星/三维不支持
  //map.setCurrentCity("北京");     // 设置地图显示的城市 离线地图不支持!!
  map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放
  map.addControl(new BMap.NavigationControl());  //缩放按钮
  </script>

2. 获取瓦片图 

这里可以参考:http://my.oschina.net/smzd/blog/619397 

当然网上也有下载工具,比如:全能电子地图下载器 

3. 直接将接收机接收到的坐标(WGS)放入百度地图中是有偏差的,这是因为百度地图为了安全做了特殊处理。其Web服务API中提供了坐标转换API,但是它是以HTTP形式提供的坐标转换接口,所以说还是无法脱离网络。这里通过一些专业的知识将WGS坐标转GCJ,再将GCJ坐标转BD百度坐标,经验证精确度几乎算很准确的了。 

public class CoorConvertUtil {
    //圆周率
    static double pi = 3.14159265358979324;
    //卫星椭球坐标投影到平面坐标系的投影因子
    static double a = 6378245.0;
    //椭球的偏心率
    static double ee = 0.00669342162296594323;
    //圆周率转换量
    public final static double x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    
    public static double[] wgs2bd(double lat, double lon){
      double[] wgs2gcj = wgs2gcj(lat, lon);
      double[] gcj2bd = gcj2bd(wgs2gcj[0], wgs2gcj[1]);
      return gcj2bd;
    }
    
    /**
     * GCJ坐标转百度坐标
     * @param lat
     * @param lon
     * @return
     */
    public static double[] gcj2bd(double lat, double lon) {
      double x = lon, y = lat;
      double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      double bd_lon = z * Math.cos(theta) + 0.0065;
      double bd_lat = z * Math.sin(theta) + 0.006;
      return new double[] { bd_lat, bd_lon };
    }
    
    public static double[] bd2gcj(double lat, double lon) {
      double x = lon - 0.0065, y = lat - 0.006;
      double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
      double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
      double gg_lon = z * Math.cos(theta);
      double gg_lat = z * Math.sin(theta);
      return new double[] { gg_lat, gg_lon };
    }
    
    /**
     * WGS坐标转GCJ坐标
     * @param lat
     * @param lon
     * @return
     */
    public static double[] wgs2gcj(double lat, double lon) {
      double dLat = transformLat(lon - 105.0, lat - 35.0);
      double dLon = transformLon(lon - 105.0, lat - 35.0);
      double radLat = lat / 180.0 * pi;
      double magic = Math.sin(radLat);
      magic = 1 - ee * magic * magic;
      double sqrtMagic = Math.sqrt(magic);
      dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
      dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
      double mgLat = lat + dLat;
      double mgLon = lon + dLon;
      double[] loc = { mgLat, mgLon };
      return loc;
    }
    
    private static double transformLat(double lat, double lon) {
      double 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;
      return ret;
    }
    
    private static double transformLon(double lat, double 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;
      return ret;
    }
    
    /**
     * 度分转度
     * @param lat 纬度 ddmm.mmmm
     * @param lon 经度 dddmm.mmmm
     * @return
     */
    public static double[] dufen2du(String lat, String lon){
      double latD=Double.parseDouble(lat.substring(0, 2));
      double latM=Double.parseDouble(lat.substring(2));
      double latNew=latD+latM/60;
      double lonD=Double.parseDouble(lon.substring(0, 3));
      double lonM=Double.parseDouble(lon.substring(3));
      double lonNew=lonD+lonM/60;
      return new double[] { latNew, lonNew } ;
    }
}

最后看项目效果截图:

 最全面的百度地图JavaScript离线版开发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
script标签属性用type还是language
Jan 21 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 #Javascript
Three.js快速入门教程
Sep 09 #Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 #Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 #Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python3.x实现发送邮件功能
2018/05/22 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python中字符串与编码示例代码
2019/05/20 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
检讨书怎么写
2015/05/07 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
js前端图片加载异常兜底方案
2022/06/21 Javascript