百度离线地图使用

百度在线地图转离线地图,以下是离线地图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>

本人基于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、付费专栏及课程。

余额充值