vue+ 高德地图路径规划的demo
官方文档说明
位置经纬度+ 驾车路线规划 高德地图官方参考链接
demo:
<template>
<div id="demo">
<el-amap vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo">
</el-amap>
</div>
</template>
<script>
import {
AMapManager
} from 'vue-amap';
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager();
export default {
name: "demo",
data() {
return {
amapManager,
mapEvents: {
init(o) {
o.setMapStyle('amap://styles/macaron'); //自定义的高德地图的样式,我选的是马卡龙
let marker = new AMap.Marker({ //点图标
position: [116.379028, 39.865042]
});
o.setZoomAndCenter(16, [116.379028, 39.865042])
marker.setMap(o);
o.plugin(["AMap.Walking"], function() {
var driving = new AMap.Walking({
map: o
})
//位置经纬度+ 驾车路线规划
//参考连接: https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat
//官方文档说明: https://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving
// driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
// if (status === 'complete') {
// console.log('绘制成功');
// } else {
// console.log('绘制失败', result);
// }
// });
//地点关键字+ 驾车路线规划
driving.search([{
keyword: '北京市地震局(公交站)',
city: '北京'
},
{
keyword: '亦庄文化园(地铁站)',
city: '北京'
}
], function(status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log('绘制驾车路线完成');
} else {
console.log('获取驾车数据失败:' + result);
}
});
o.addControl(driving);
})
}
}
}
}
}
</script>
<style lang="scss" scoped>
.amap-demo {
width: 100%;
height: 100vh;
}
</style>