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

洛依尘
962 阅读3分钟

准备工作

注册账号并申请高德Key

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

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

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

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

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

项目Html设置

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

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

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

引入npm

映入高德地图的npm包

npm i @amap/amap-jsapi-loader --save

正式搭建

template

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

    <div class="map">
      <div id="container" />
      <div id="panel" />
    </div>

初始化地图

首先我们先进行地图的初始化，将申请好的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)
    })
}

展示图

image.png

完整代码

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

<script lang="ts" setup>
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
})
</script>

<template>
  <el-dialog v-model="dialogTableVisible" title="配送路径" width="1000px">
    <div class="map">
      <div id="container" />
      <div id="panel" />
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.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 */
    }
  }
}
</style>
avatar
文章
阅读
粉丝