<template>
<div class="app-container" :style="{ height: windowHeight - 50 + 'px' }">
<div id="container"></div>
<div id="panel"></div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
//实时屏幕高度
windowHeight: document.documentElement.clientHeight,
map: null,
address: ''
}
},
mounted() {
// 当浏览器被重置大小时执行
window.onresize = () => {
return (() => {
this.windowHeight = document.documentElement.clientHeight;
})()
};
//调用地图初始化方法
this.initAMap()
},
methods: {
initAMap() {
let that = this;
//基本地图加载
let map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
//构造路线导航类
let driving = new AMap.Driving({
map: map,
panel: "panel"
});
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
that.$message({
message: '绘制驾车路线完成',
type: 'success'
});
} else {
that.$message.error('获取驾车数据失败'+ result);
}
});
}
}
}
</script>
<style scoped>
#app-container {
width: 100%;
position: relative;
}
#container {
width: 100%;
height: 100%;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 70px;
right: 20px;
width: 280px;
}
</style>
vue实现高德地图路线规划功能(位置经纬度+驾车规划路线)
最新推荐文章于 2024-06-19 17:33:44 发布