1.引入
2.创建并初始化实例对象
const map = new AMap.Map("container")
3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥时候踩过,文档里没有详细说)
4.使用路线规划插件
这里先拿驾车路线规划举个例子
假设var start = "天安门", end = "人民大会堂"
AMap.plugin('AMap.Driving', function () {
const driving = new AMap.Driving({
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME,
// map 指定将路线规划方案绘制到对应的AMap.Map对象上
map: map,
// panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
// 搜索完成后，将自动绘制路线到地图上
driving.search(points)
})
当然不只有驾车路线规划,还有其他类型:
步行规划
AMap.plugin('AMap.Walking', function () {
const walking = new AMap.Walking({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
walking.search(points)
})
骑行规划
AMap.plugin('AMap.Riding', function () {
const riding = new AMap.Riding({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
riding.search(points)
})
公交规划
AMap.plugin('AMap.Transfer', function () {
const transfer = new AMap.Transfer({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
transfer.search(points)
})
货车规划(一天只能调用100次,超过收费)
AMap.plugin('AMap.TruckDriving', function () {
const truckDriving = new AMap.TruckDriving({
map: map,
panel: 'panel',
// policy: ,
size: 1, // 必填, 车辆大小
})
const points = [
{ keyword: start },
{ keyword: end }
]
truckDriving.search(points)
})
以上只是简单的实现,具体的属性和方法还是要看文档的
附demo:
Document
起始点：
目的地：
步行规划
骑行规划
驾车规划
公交规划
货车规划
const map = new AMap.Map('container')
function gui(tab) {
const start = document.getElementById('start').value
const end = document.getElementById('end').value
switch (tab) {
case 1:
walking(start, end)
break;
case 2:
riding(start, end)
break;
case 3:
driving(start, end)
break;
case 4:
transfer(start, end)
break;
case 5:
truckDriving(start, end)
break;
}
}
// 步行规划
function walking(start, end) {
AMap.plugin('AMap.Walking', function () {
const walking = new AMap.Walking({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
walking.search(points)
})
}
// 骑行规划
function riding(start, end) {
AMap.plugin('AMap.Riding', function () {
const riding = new AMap.Riding({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
riding.search(points)
})
}
// 驾车规划
function driving(start, end) {
AMap.plugin('AMap.Driving', function () {
const driving = new AMap.Driving({
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME,
// map 指定将路线规划方案绘制到对应的AMap.Map对象上
map: map,
// panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
// 搜索完成后，将自动绘制路线到地图上
driving.search(points)
})
}
// 公交规划
function transfer(start, end) {
AMap.plugin('AMap.Transfer', function () {
const transfer = new AMap.Transfer({
map: map,
panel: 'panel'
})
const points = [
{ keyword: start },
{ keyword: end }
]
transfer.search(points)
})
}
// 货车路径规划
function truckDriving(start, end) {
AMap.plugin('AMap.TruckDriving', function () {
const truckDriving = new AMap.TruckDriving({
map: map,
panel: 'panel',
// policy: ,
size: 1, // 必填, 车辆大小
})
const points = [
{ keyword: start },
{ keyword: end }
]
truckDriving.search(points)
})
}
