最全面的百度地图JavaScript离线版开发项目要求web版百度地图要离线开发。这里总结下自己的开发过程和经验。大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标、速度、转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置。作业点不一定都有网络,所以要求离线开发。此过程主要有三个技术点:1.如何获取离线的API2.如何获取离线瓦片图3.如何在离线状态下将WGS坐标转换成百度地图坐标解决问题过程:1.既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码。这里可以参考:my.oschina/s毛泽东/blog/548538这里整理好了一份,其中也按照示例Demo写了一份离线的Demo。当然离线的不可能做到和在线一样完美,毕竟还是有些功能用不了的。(此版本是基于百度地图APIV2.0)使用方法:复制代码1.确定你用的瓦片的图片后缀,如.png,.jpg。修改baidumap_offline_v2_load.js中的imgextvarbdmapcfg={'imgext':'.jpg',//瓦片图的后缀------根据需要修改,一般是.png.jpg'tiles_dir':''//瓦片图的目录,为空默认在baidumap_v2/tiles/目录};2.确定你用的瓦片的目录,默认在baidumap_v2/tiles/目录下,你也可以改成其他地址。修改baidumap_offline_v2_load.js中的tiles_dir3.参考demo编写代码,要点如下:1)只需要加载load文件<scripttype="text/javascript"src="baidumapv2/baidumap_offline_v2_load.js"></script>2)加载css文件(貌似可不需要)<linkrel="stylesheet"type="text/css"href="../../baidumapv2/css/baidu_map_v2.css"/>3)定义个放置地图的容器,并用css控制高度和宽度<divid="map_demo"></div>4)书写js代码<scripttype="text/javascript">//百度地图API功能varmap=newBMap.Map("map_demo");//创建Map实例map.centerAndZoom(newBMap.Point(116.404,39.915),8);//初始化地图,设置中心点坐标和地图级别//map.addControl(newBMap.MapTypeControl());//添加地图类型控件离线只支持电子地图,卫星/三维不支持//map.setCurrentCity("北京");//设置地图显示的城市离线地图不支持!!map.wwwang027enableScrollWheelZoom(true);//开启鼠标滚轮缩放map.addControl(newBMap.NavigationControl());//缩放按钮</script>复制代码2.获取瓦片图这里可以参考:my.oschina/s毛泽东/blog/619397当然网上也有下载工具,比如:全能电子地图下载器3.直接将接收机接收到的坐标(WGS)放入百度地图中是有偏差的,这是因为百度地图为了安全做了特殊处理。其Web服务API中提供了坐标转换API,但是它是以形式提供的坐标转换接口,所以说还是无法脱离网络。这里通过一些专业的知识将WGS坐标转GCJ,再将GCJ坐标转BD百度坐标,经验证精确度几乎算很准确的了。复制代码publicclassCoorConvertUtil{//圆周率staticdoublepi=3.14159265358979324;//卫星椭球坐标投影到平面坐标系的投影因子staticdoublea=6378245.0;//椭球的偏心率staticdoubleee=0.00669342162296594323;//圆周率转换量publicfinalstaticdoublex_pi=3.14159265358979324*3000.0/180.0;publicstaticdouble[]wgs2bd(doublelat,doublelon){double[]wgs2gcj=wgs2gcj(lat,lon);double[]gcj2bd=gcj2bd(wgs2gcj[0],wgs2gcj[1]);returngcj2bd;}/***GCJ坐标转百度坐标*@paramlat*@paramlon*@return*/publicstaticdouble[]gcj2bd(doublelat,doublelon){doublex=lon,y=lat;doublez=Math.sqrt(x*x+y*y)+0.00002*Math.sin(y*x_pi);doubletheta=Math.atan2(y,x)+0.000003*Math.cos(x*x_pi);doublebd_lon=z*Math.cos(theta)+0.0065;doublebd_lat=z*Math.sin(theta)+0.006;returnnewdouble[]{bd_lat,bd_lon};}publicstaticdouble[]bd2gcj(doublelat,doublelon){doublex=lon-0.0065,y=lat-0.006;doublez=Math.sqrt(x*x+y*y)-0.00002*Math.sin(y*x_pi);doubletheta=Math.atan2(y,x)-0.000003*Math.cos(x*x_pi);doublegg_lon=z*Math.cos(theta);doublegg_lat=z*Math.sin(theta);returnnewdouble[]{gg_lat,gg_lon};}/***WGS坐标转GCJ坐标*@paramlat*@paramlon*@return*/publicstaticdouble[]wgs2gcj(doublelat,doublelon){d...