在Vue3.2中使用高德地图的路径规划

2024-06-15 06:42| 来源: 网络整理| 查看: 265

准备工作注册账号并申请高德Key

首先，注册开发者账号，成为高德开放平台开发者

登录之后，再进入「应用管理」页面「创建新应用」

为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」，设置域名白名单，可选（建议设置域名白名单）。

添加成功后，可获取到key值和安全密钥jscode （自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险。）

项目Html设置

JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）：

引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

window._AMapSecurityConfig = { securityJsCode:'您申请的安全密钥', } 引入npm

映入高德地图的npm包

npm i @amap/amap-jsapi-loader --save 正式搭建

template

添加div标签作为地图容器，同时为该div指定id属性；地图id为"container" 添加div标签作为路径提示容器，同时为该div指定id属性；提示id为"panel"

初始化地图

首先我们先进行地图的初始化，将申请好的Web端开发者Key，版本号和你所需要的plugins进行地图的注册，返回来的结果AMap就可以进行挂载到我们div上了，然后再进行路径查询方法，将查到的路径在地图上显示，并且在panel上展示出来详细的路口

//进行地图初始化 function initMap() { AMapLoader.load({ key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填 plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 Loca: { version: "2.0.0" } }) .then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], center: [113.08982, 28.32427], //地图中心点 zoom: 10 //地图显示的缩放级别 }) // 路径查询方法 const goView = () => { // eslint-disable-next-line no-undef const driving = new AMap.Driving({ map: map, // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式 policy: AMap.DrivingPolicy.LEAST_TIME, // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID panel: "panel" }) // 根据起终点经纬度或者模糊地址规划驾车导航路线 driving.search( [ { keyword: props.startName, city: "长沙" }, { keyword: props.endName, city: "长沙" } ], function (status: any, result: any) { // result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === "complete") { console.log("绘制驾车路线完成", result) } else { console.log("获取驾车数据失败：" + result) } } ) } goView() // 获取线路规划 }) .catch((e) => { console.log(e) }) }

展示图

完整代码

我这里是用的element-plus的dialog来展示，起始地和终点都是来自父组件的props

import { ref } from "vue" import AMapLoader from "@amap/amap-jsapi-loader" const props = defineProps(["startName", "endName"]) console.log(props) //进行地图初始化 function initMap() { AMapLoader.load({ key: "申请好的Web端开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填 plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 Loca: { version: "2.0.0" } }) .then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], center: [113.08982, 28.32427], //地图中心点 zoom: 10 //地图显示的缩放级别 }) const goView = () => { // eslint-disable-next-line no-undef const driving = new AMap.Driving({ map: map, // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式 policy: AMap.DrivingPolicy.LEAST_TIME, // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID panel: "panel" }) // 根据起终点经纬度规划驾车导航路线 driving.search( [ { keyword: props.startName, city: "长沙" }, { keyword: props.endName, city: "长沙" } ], function (status: any, result: any) { // result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === "complete") { console.log("绘制驾车路线完成", result) } else { console.log("获取驾车数据失败：" + result) } } ) } goView() // 获取线路规划 }) .catch((e) => { console.log(e) }) } initMap() const dialogTableVisible = ref(false) const changeDialog = () => { dialogTableVisible.value = !dialogTableVisible.value } //暴露方法 defineExpose({ changeDialog, initMap }) .map { width: 100%; height: 600px; background-color: #fff; position: relative; #container { padding: 0px; margin: 0px; width: 100%; height: 100%; } #panel { position: absolute; top: 0; width: 300px; height: 400px; overflow-y: scroll; opacity: 0.8; border-radius: 4px; &::-webkit-scrollbar { display: none; /* Chrome Safari */ } } }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章