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

最新推荐文章于 2024-05-23 11:27:17 发布

码到成功♡

最新推荐文章于 2024-05-23 11:27:17 发布

阅读量6k

点赞数 4

分类专栏：地图文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yrrjiayou/article/details/124762248

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

实现过程如下

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

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

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中引入需要的依赖：

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

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

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