基本使用步骤
-
1.引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
-
2.创建并初始化实例对象
<div id="container"></div>
const map = new AMap.Map("container")
-
3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥时候踩过,文档里没有详细说)
<div id="panel"></div>
-
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:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 起始点:<input type="text" id="start"> 目的地:<input type="text" id="end"> <button onclick="gui(1)">步行规划</button> <button onclick="gui(2)">骑行规划</button> <button onclick="gui(3)">驾车规划</button> <button onclick="gui(4)">公交规划</button> <button onclick="gui(5)">货车规划</button> <div id="container" style="width: 50vw;height: 50vw;"></div> <div id="panel"></div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script> <script> 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) }) } </script> </body> </html>