百度地图离线API开发(真正的离线开发)

         公司现在做的一个项目本来用的是google离线地图,但是发现谷歌的地图数据很久没更新数据了,中国的城市发展这么快,好多地方地图和现实都对不上了。发现百度地图数据更新挺快的(呵呵,毕竟是国产的吗),最后公司决定要把google地图换成百度地图。就把此重任交个了本小侠,我上网一查,百度地图根本就不提供离线地图包。小侠我顿时觉得掉进坑里了。哎,谁让本小侠是打工的呢,命苦啊。只能顶头硬上了。

 

         于是,本小侠就拼命的百度啊,翻墙google“百度地图离线包”,搜了一个星期终于有点眉目了。但是发现网上的百度离线地图有两个致命缺陷:

         1,不支持IE

         2,地图的功能很少,不支持聚合,不支持画多边形等等。

这显然不符合公司的要求,于是本小侠决定经知己研究一个全新的,经过我三个月的研究,终于搞定了百度离线地图。啥都不说,先看看本小侠的战果吧:

 

地图纯离线:


 

 

 

支持IE7891011(已测),更高版本还没测试;fireFixchrome等主流浏览器。

支持画圆,画多边形等:

 

支持多点聚合:

 

 

呵呵,效果还不错吧!

 

下面说下本小侠的开发思路:

         既然百度提供在线的地图,我们想要的是在线的,那么我们就要想办法把在线的代码改成离线的代码。就这么简单!

 

1.首先获取百度 JavaScript API

  首先用浏览器打开http://api.map.baidu.com/api?v=1.3如下图所示:

其中http://api.map.baidu.com/getscript?v=1.3&ak=&services=&t=20150527115231个链接就是我们要找的API文件,

同样在浏览器中打开它,并另存为诸如“apiv1.3.min.js”

 

还有百度地图必须的一些控件,光标,logo之类的图片也下载下来

 

2.修改“apiv1.3.min.js”把里面的地图控件的图片,光标,logo等链接替换成本地的。

 

3.下载依赖模块API文件(非常关键)

此文件必不可少,如果缺少某个依赖模块,则无法使用相应的API。这个请求文件的原理是根据你在自己页面中使用的API来向官网请求相应的依赖模块API,参数的字符串格式是根据所使用依赖模块的顺序生成“模块名”以“,”分隔。

<script type="text/javascript">
var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP});
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(point,5);                     // 初始化地图,设置中心点坐标和地图级别。
 
//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。  
//map.setCurrentCity("北京");          // 设置地图显示的城市此项是必须设置的
</script>

 

所请求的依赖库参数是http://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control

 

为了省去麻烦,Demo中的依赖库命名为modules(可以根据自己需要修改),在Demo文件/js路径下,里面已有map,oppc,tile,control,menu,marker,infowindow这几个模块

 

可以根据自己的需要从这个地址得到:http://api.map.baidu.com/getmodules?v=1.3&mod=模块名,然后将内容添加到modules文件中。

 

 

4,Demo文件中的modules文件中在map模块部分已经去掉了百度版权信息,

 

由于本人时间有限,代码资源包和更详尽的信息请访问QQ空间:2926963574查看。

本人基于2017年12月最新API制作。 说明: 1)离线地图不是万能的, 有些依赖在线的功能是无法使用的, 请自行扩展 2)请查看 离线地图示例demo.html 里面的示例,或者查看地图API在线示例: http://developer.baidu.com/map/jsdemo.htm 3) 地图API请查看百度官方说明: http://developer.baidu.com/map/reference/index.php 4)如有更新,请查看网站: http://www.xiaoguo123.com/p/baidumap_offline_v21 5)此API用户大家交流学习,本人没有能力提供太多的技术帮助 6)由于某些用途导致的商业纠纷,和本人无关 新增: 1)支持显示卫星混合地图,瓦片图放到 tiles_hybrid 目录下 2)支持支定义混合图,瓦片图放到 tiles_self 目录下 3)增加根据城市名称设置地图中心, 请自行扩展map_city.js 4)增加鼠标测距示例 5)增加鼠标绘制线面示例 增加新的瓦片图: 1)使用地图下载工具(如太乐地图下载)下载你要的地区和级别 2)务必导出瓦片图(百度格式),可以选择导出jpg或png图形 3)按需要修改map_load.js,指定瓦片图的路径,或者按默认的来 4)目录说请看图片: 目录说明.jpg 基本的使用方法如下: 1)加载离线地图必须的文件: [removed][removed] <link rel="stylesheet" type="text/css" href="offlinemap/css/map.css"/> 2)增加一个容器用来显示地图 3)写JS脚本 [removed] var map = new BMap.Map("map_demo"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 7); // 初始化地图,设置中心点坐标和地图级别 map.setCurrentCity("武汉"); // 设置地图中心显示的城市 new! map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl()); //缩放按钮 map.addControl(new BMap.MapTypeControl( {mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]} )); //添加地图类型控件 离线只支持普通、卫星地图; 三维不支持 [removed]
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值