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

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

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

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

1. 如何获取离线的API

2. 如何获取离线瓦片图

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

解决问题过程：

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

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

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

使用方法：

1. 确定你用的瓦片的图片后缀，如.png, .jpg。修改 baidumap_offline_v2_load.js 中的imgextvar bdmapcfg = { 'imgext':'.jpg', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg 'tiles_dir':''  //瓦片图的目录，为空默认在 baidumap_v2/tiles/ 目录};2. 确定你用的瓦片的目录，默认在baidumap_v2/tiles/目录下，你也可以改成其他地址。修改 baidumap_offline_v2_load.js 中的tiles_dir3. 参考demo编写代码, 要点如下： 1）只需要加载load文件  <script type="text/javascript" src='/images/loading.gif' data-original="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>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：最全面的百度地图JavaScript离线版开发

关键词：JavaScript