效果展示
点击这里查看官方文档
第一步引入百度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);
});
}