百度离线地图使用

96 阅读 0 评论 64 点赞

我是靠谱客的博主平常花瓣，最近开发中收集的这篇文章主要介绍百度离线地图使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

百度在线地图转离线地图，以下是离线地图API配置说明，文件夹目录结构建议保持不变，apiv2.0.min.format.js 进行配置即可
1.html页面引入 apiv2.0.min.format.js，引入bmap.css
2.apiv2.0.min.format.js 打开，找到 z.ma = 定位到需要修改内容
在这里插入图片描述
配置项目可访问getmodules.js 路径
搜索关键字 getmodules.js定位到，

Pb(z.ma + “js/getmodules.js”); 是组装可访问到路径，可自定义调整
3.本地地图瓦片资源下载
百度地图瓦片下载：链接：https://pan.baidu.com/s/1DVvQRfFwPjdfHjOB7iO2cQ 密码：db49
需要ak，可以自己注册，或者网上找分享的，图片格式选 png，下载瓦片级别看需求，可视区域和行政区域都可以下载
在这里插入图片描述

4. 将下载下瓦片放到服务器上，供客户端访问，例如 tomcat
http://127.0.0.1:8080/tiles/
5. demo 示例，编辑器有点问题，括号写的不对，谅解
《script type=“text/javascript” src=“js/apiv2.0.min.js”>
《link rel=“stylesheet” type=“text/css” href=“css/bmap.css”/>
《div style=“width:520px;height:340px;border:1px solid gray” id=“container”>
《script type=“text/javascript”>
var map = createmap();
function createmap() {
var outputPath = ‘http://127.0.0.1:8080/tiles/’;
fromat = ‘.png’;
tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x, y, url;
x = tileCoord.x;
y = tileCoord.y;
url = outputPath + zoom + ‘/’ + x + ‘/’ + y + fromat;
return url;
};
tileMapType = new BMap.MapType(‘tileMapType’, tileLayer);
var map = new BMap.Map(‘container’, {
mapType: tileMapType,
enableMapClick: false
});
// 测试代码 start
var point = new BMap.Point(111.404, 40.915);
map.centerAndZoom(point, 6);
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();
map.enableContinuousZoom();
var marker = new BMap.Marker(point);
map.addOverlay(marker);

var polyline = new BMap.Polyline([
	new BMap.Point(111.404, 40.915),
	new BMap.Point(112.404, 42.915),
	new BMap.Point(116.404, 42.915)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

map.addOverlay(polyline);
// 测试代码 end
return map;
};

/script>