百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图_码到成功?_百度地图路书

未知 02-07 4622

前几天vue项目中需要使用百度地图的路数功能制作历史轨迹，为了离线时也可以正常计算路程等，所以这里选择使用原生离线去实现路书

这里放出百度的官方示例：地图JS API示例 | 百度地图开放平台

我先用的线上地址做测试：

实现过程如下

1、在publish/index.html中引入需要的依赖：

2、以下是在vue页面中使用

<template> <div style="height: 400px;" id="map_canvas"></div> <div id="result"></div> </template> <script> export default { name: '', data() { return { } }, methods: { // 路书--原生 baiduMap() { // 创建地图实例 var map = new BMap.Map('map_canvas') // 鼠标滚轮是否播放默认关闭开启则为true map.enableScrollWheelZoom() // 初始化地图，设置中心点坐标和地图级别 map.centerAndZoom(new BMap.Point(116.404, 39.915), 13) var drv = new BMap.DrivingRoute('北京', { onSearchComplete: function(res) { if (drv.getStatus() == BMAP_STATUS_SUCCESS) { var plan = res.getPlan(0) var arrPois = [] for (var j = 0; j < plan.getNumRoutes(); j++) { var route = plan.getRoute(j) arrPois = arrPois.concat(route.getPath()) } map.addOverlay( new BMap.Polyline(arrPois, { strokeColor: 'red', //轨迹颜色 strokeWeight: 5 //轨迹宽度 }) ) map.setViewport(arrPois) // ----------------------覆盖物---------------------- // 此处的路书已在全局index.html中定义 ---var lushu lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: '', //"从天安门到百度大厦" ----覆盖物中的内容 autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: 4500, enableRotation: true, //是否设置marker随着道路的走向进行旋转，默认为false，即不随路走向旋转 landmarkPois: [ // 要在覆盖物移动过程中，显示的特殊点 { lng: 116.314782, lat: 39.913508, html: '加油站', pauseTime: 2 }, { lng: 116.381476, lat: 39.974073, html: '肯德基早餐', pauseTime: 2 } ] }) setTimeout('lushu.start()', 1000) } } }) // 起始位置 var start = new BMap.Point(116.404844, 39.911836) // 终止位置 var end = new BMap.Point(116.308102, 40.056057) drv.search(start, end) function $(element) { return document.getElementById(element) } } }, created() { this.$nextTick(() => { this.baiduMap() }) } } </script>

这样的话会报错 lushu is notdefined? ，这里是因为lushu变量作用域问题，这时候也需要在publish/index.html中定义一下:? var? lushu? ??

这样线上原生路数就可以使用了，可以在后台拿取数据替换到测试数据中

离线地图：

1、在publish/index.html中引入需要的依赖：

2、使用在线地址访问应用码数据，获取到在线的js更名为map.js，添加到包下的vue-baidu-map/components/map文件夹下，作为离线js使用

3、在map.js下添加服务器存储的瓦片图地址

var imageUrl='瓦片图地址'

4、修改获取服务器瓦片图地址

5、在页面中引入map.js，离线地图就可以使用了

特别说明：

使用离线地图就要用到下载好的当地瓦片图

离线地图因为是提前下载好的瓦片图，所以不能进行实时更新