vue3集成百度地图实现定位和路线规划的功能

效果展示

点击这里查看官方文档
第一步引入百度script放在public下index.html里面

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=自己的ak"></script>

第二步定义地图标签

 <div id="dwmap" class="dwmap" style="width: 100%; height: 546px"></div>

第三步展示地图开启定位并实现路线规划

onMounted(() => {
  getadress()
});
function getadress() {

  map.value = new BMapGL.Map("dwmap");          // 创建地图实例 
  var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
  map.value.centerAndZoom(point, 15);     //  初始化地图，设置中心点坐标和地图级别 
  let lng = ref('')
  let lat = ref('')
  //获取定位
  var geolocation = new BMapGL.Geolocation();
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
       localStorage.setItem('lng', r.point.lng);
 
      localStorage.setItem('lat', r.point.lat);
     
    

      // 路线规划
      var p1 = new BMapGL.Point(localStorage.getItem('lng'), localStorage.getItem('lat'));
      var p2 = new BMapGL.Point(106.542216, 29.571313);

      var driving = new BMapGL.DrivingRoute(map.value, {
        renderOptions: {
          map: map.value,
          autoViewport: true
        }
      });
      driving.search(p1, p2);  // 路线规划
    }
    else {
      alert('failed' + this.getStatus());
    }
  });
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.value.addControl(zoomCtrl);
}
//调用百度地图路线规划导航函数

let indexList = ref([]);
function getquanjingdata() {
  API.getquanjing()
    .then((res) => {
      console.log(res);
      randomUrl.value = res.data.data[360].link_url;
      indexList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
}