百度地图整合离线和使用

整体思路:

说明:这边用的是apiv1.3版本,现在的版本没有进行尝试(基本地图功能都OK可以实现)。

1.先在可上网电脑上引用正确的 http://api.map.baidu.com/api?v=1.3 地址,可以看到引用的一些js和css,进行下载到本地,进行引用(一个是基本样式,一个是基本js);

2.在下载常用的地图模块(map,oppc,tile,control,marker)https://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker%E2%80%9D

这些就是我们在地图所使用的的点、线、标注等,如果还需要其他的模块,在线做一个demo看浏览器的控制台Network中有关modules的链接数据进行下载保存到 一个modules文件 中直接引用

3.下载离线地图瓦片(好多软件可以进行下载,不过好像都没有最深层的,毕竟数据量大,我用的是 全能地图下载器,注意下载百度的地图瓦片)

4.将我们下载引用的 bmap.css 打开里面有我们所需的png,进行下载放到本地并修改bmap.css中的路径

5.我这边用的是覆盖层进行地图瓦片的覆盖就是在地图上覆盖一层瓦片,我的所有功能没有受影响(还有一种是更好的但是复杂一些就是直接修改下载的 apiv1.3.min.js 里对瓦片调用url的修改,这里我没做详细研究,为了进度)

    var tileLayer = new BMap.TileLayer({
		isTransparentPng: true
	});
	tileLayer.getTilesUrl = function(tileCoord, zoom) {
		var x = tileCoord.x;
		var y = tileCoord.y;
		return '本地文件名' + '/' + zoom + '/' + x + '/' + y + '.png';
	}

	var map = new BMap.Map('container');
	map.addTileLayer(tileLayer);
	map.addControl(new BMap.NavigationControl());
	map.centerAndZoom(new BMap.Point(, ), 19);
	map.enableScrollWheelZoom(); //启用滚轮放大缩小

6.启动查看控制台会发现Network回头很多404错误(断网没有缓存),这是因为 apiv1.3.min.js 里面有最底层瓦片调用和一些js引用,挨个选择名称去 apiv1.3.min.js 查找去修改其url 或直接return null 就行(我们所有的依赖是直接在页面有引用所以不需要 apiv1.3.min.js 去帮我们引);下图是我所有引用文件

<link rel="stylesheet" href="css/bmap.css">
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<script type="text/javascript" src="js/modules"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/Lushu_min.js"></script>

本人基于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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值