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

项目要求百度地图网页版离线开发。在这里总结一下自己的发展历程和经验。

大致要求是每辆车都配备一个公司接收器，可以实时反馈车辆的坐标、速度、转向等信息，接收到每辆车的信息后，在百度地图上实时绘制车辆位置。不是所有的运营点都有网络，所以需要线下开发。

这个过程有三个技术要点：

1.如何获取离线应用编程接口

2.如何获取离线切片图

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

问题解决过程：

1.既然百度地图不支持离线地图，我们就要想办法把线上代码改成离线代码。

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

这里安排了一个副本，其中还根据示例演示编写了一个离线演示。当然，线下不可能像线上那么完美。毕竟还有一些功能不能用。(此版本基于百度地图API V2.0)

用法：

1.确定您使用的图块的图片后缀，例如。png . jpg .在Baidu map _ offline _ v2 _ load . js v2 _ load . js中修改imgext。

Varbdmapcfg={'img ext' : '。jpg '，//平铺图的后缀根据需要修改，一般为. png . jpg ' tiles _ dir ' : '//平铺图的目录；如果为空，则默认为baidumap_v2/tiles/directory。2.确保您使用的切片目录。默认目录是baidumap_v2/tiles/，您可以将其更改为另一个地址。修改Baidu map _ offline _ v2 _ load . js v2 _ load . js中的tiles_dir。

3.参考demo编写代码，要点如下：

1)只需加载加载文件脚本类型=' text/JavaScript ' src=' http : baidumpv 2/Baidu map _ offline _ v2 _ load . js '/script 2)加载css文件(看似不必要)linkrel='样式表'类型=' text/css' href='././baidumap v2/CSS/Baidu _ map _ v2 . CSS '/3)定义放置地图的容器，用CSS控制高度和宽度div id=' map _ demo '

脚本类型=' text/JavaScript '/Baidu map API函数var map=new BMap。map(' map _ demo ')；//创建地图实例地图。居中和缩放(新bmap。点(116.404，39.915)，8)；//初始化地图，设置中心点坐标和地图级别//map . addcontrol(new map . maptype control())；//添加地图类型控件Offline只支持电子地图，不支持卫星/3D。//map . setcurrentcity(' Beijing ')；//不支持设置地图显示的离线城市地图！map.enableScrollWheelZoom(真)；//打开鼠标滚轮缩放map . add control(new map . navigation control())；//缩放按钮/script2。获取切片地图

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

当然，网上也有下载工具，比如：万能电子地图下载器

3.直接把接收方收到的坐标(WGS)放入百度地图是有失偏颇的，因为百度地图为了安全做了特殊处理。Web服务API提供了坐标转换API，但它是以HTTP的形式提供的坐标转换接口，因此无法脱离网络。这里通过一些专业知识，把WGS坐标转移到GCJ坐标，再把GCJ坐标转移到BD百度坐标。经过验证，准确度几乎是准确的。

公共类co r convertical {//哎哎哎哎静态双pi=3.14159265358979324//你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看静态双a=6378245.0//范仲淹的意思是静态双ee=0.006693462169659343//你好公共最终静态双x _ pi=3.14159265358979324 * 3000.0/180.0；公共静态双[……]WGS 2 BD(双纬度，双纵列){双[……]WGS 2 gcj=WGS 2 gcj(纬度，纵列);双[] gcj2bd=gcj2bd(wgs2gcj[0]，WGS 2 gcj[1])；gcj 2数据库返回；} /** * GCJ你好* @ param lat * @ param lon * @ return */public static double[]gcj 2bd(double lat，double lon) { double x=lon，y=latdouble z=math。sqrt(x * x y * y)0.00002 *数学。sin(y * x _ pi)；双=math . atan 2(y，x)0.000003 * math。cos(x * x _ pi)；double BD _ lon=z *数学。cos()0.0065:double BD _ lat=z * math。sin()0.006:返回新的双[] { bd_lat，BD _ lon }；}公共静态双[……]BD 2 gcj(双纬度，双纬度){双x=lon - 0.0065，y=lat-0.006；double z=数学。sqrt(x * x y * y)-0.00002 *数学。sin(y * x _ pi)；双=math . atan 2(y，x)-0.000003 * math。cos(x * x _ pi)；双gg _ lon=z * math . cos():双gg _ lat=z * math . sin():返回新的双[] { gg_lat，gg _ lon }；} /** * WGS张佳丽GCJ(全球资讯网)哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟* @ param lat * @ param lon * @ return */public static double[]WGS 2 gcj(double lat，double lon){ double dlat=transform lat(lon-105.0，lat-35.0)；双dLon=变压器(lon - 105.0、lat-35.0)；双绞线=lat/180.0 * pi；双重魔法=数学拉德拉特):魔术=1 - ee *魔术*魔术；double sqrtmagic=数学。sqrt(魔术):dlat=(dlat * 180.0)/(a *(1-ee))/(magic * sqrtm)* pi)；dlon=(dlon * 180.0)/(a/sqrtm * math。cos(rad lat)* pi)；双mglat=lat dlat双mglon=lon dlon双[] loc={ mgLat，mglon }；返回位置；}私有静态双折射(双倍lat，双倍lon){双倍ret=-100。0 .2 .0 * lat 3.0 * lon 0.2 * lon * lon 0.1 * lat * lon 0.2 *数学。sqrt(数学。ABS(lat))；ret=(20.0 *数学。sin(6.0 * lat * pi)20.0 *数学。sin(2.0 * lat * pi))* 2.0/3.0；ret=(20.0 *数学。sin(lon * pi)40.0 *数学。sin(lon/3.0 * pi))* 2.0/3.0；ret=(160.0 *数学。sin(lon/12.0 * pi)320 *数学。sin(lon * pi/30.0))* 2.0/3.0；返回后悔；}私有静态双变换lon(double lat，double lon){ double ret=300.0 lat 2.0 * lon 0.1 * lat * lat 0.1 * lat * lon 0.1 * math。sqrt(数学。ABS(lat))；ret=(20.0 *数学。sin(6.0 * lat * pi)20.0 *数学。sin(2.0 * lat * pi))* 2.0/3.0；ret=(20.0 *数学。sin(lat * pi)40.0 *数学。sin(lat/3.0 * pi))* 2.0/3.0；ret=(150.0 *数学。sin(lat/12.0 * pi)300.0 *数学。sin(lat/30.0 * pi))* 2.0/3.0；返回后悔；} /**菲兰达* @param lat#年#ddmm.mmmm * @param lon胡志明DDD mm . mmmm * @ return */public static double[]duff 2 du(string lat，string lon){ double latd=double。解析double(稍后。substr(0，2))；双倍latm=双倍。解析double(稍后。substr(2))；双lat new=latd latm/60；双倍伦敦=双倍。解析double(lon。substr(0，3))；双倍伦敦=双倍。解析double(lon。substr(3))；双lon new=lond lonm/60；返回新双[……]{ latnew，lon new }；}}嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨：

朱塞佩朱塞佩朱塞佩朱塞佩，阿云阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜，吴亚玲吴亚玲吴亚玲。