基于高德地图实现vue3的移动端物流路线相关功能

已于 2023-05-26 17:03:44 修改
阅读量2.2k 收藏 23
点赞数 11
文章标签： vue.js javascript
于 2023-05-26 17:01:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhgweb/article/details/130888553
版权

基于高德地图实现vue3的移动端物流路线相关功能

自我记录

一.参考文档

高德地图开放平台: https://lbs.amap.com/
Web开发-JSAPI文档: https://lbs.amap.com/api/javascript-api-v2/summary/
参考手册: https://lbs.amap.com/api/javascript-api-v2/documentation

步骤：

准备工作: https://lbs.amap.com/api/javascript-api-v2/prerequisites
vue中使用: https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue

在这里插入图片描述

key 和 安全密钥jscode 已经有了 开始下一步

二. 安装&简单使用

1.安装

pnpm add @amap/amap-jsapi-loader

2.配置

<script setup lang="ts">
// 高德 v2.0需要配置安全密钥jscode 
//（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
window._AMapSecurityConfig = {
  securityJsCode: '5fxxxxxxxxxxxxxxx3' // 安全密钥jscode
}
</script>

TS项目汇报错 window :类型“Window & typeof globalThis”上不存在属性“_AMapSecurityConfig”。

解决方案:
在src/types/global.d.ts文件添加扩展属性代码

// 给全局对象 Window 扩展一个属性 _AMapSecurityConfig
interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
}

3.导入刚刚安装的包AMapLoader 并使用

<script setup lang="ts">
// 导入包
import AMapLoader from '@amap/amap-jsapi-loader'
// 高德 v2.0需要配置安全密钥jscode 
//（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
window._AMapSecurityConfig = {
  securityJsCode: '5fxxxxxxxxxxxxxxx3' // 安全密钥jscode
}
onMounted(() => {
  // 调用地图
  initMap()
})
const initMap = () => {
AMapLoader.load({
    key: '79xxxxxxxxxxxx0',// 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    // 使用 Amap 初始化地图 .then 异步了 所以直接就能拿到 #map容器了
        const map = new AMap.Map('map', { // 设置地图容器id
        // viewMode: '3D', //是否为3D地图模式
        zoom: 4 //初始化地图级别 一般12
        // center: [105.602725, 37.076636] //初始化地图中心点位置 不设置默认是北京
        // mapStyle: 'amap://styles/whitesmoke' // 设置地图样式 远山黛
      })
		
		**在这预留下面的配置代码**
  })
}
</script>
<template>
    <div id="map">
    </div>
</template>
<style lang="scss" scoped>
#map {
  height: 450px;
  background-color: #F6F7F9;
  overflow: hidden;
  }

在这里插入图片描述
在这里插入图片描述

三.我使用的一些插件配置

1.加载路线规划插件

路线规划: https://lbs.amap.com/api/javascript-api-v2/guide/services/navigation
Driving配置项参考地址: Driving配置项参考地址

// 加载路线规划插件
AMap.plugin('AMap.Driving', function() {
  // 初始化路线规划对象
  var driving = new AMap.Driving({
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
 	// policy: AMap.DrivingPolicy.LEAST_TIME,
    map: map, //AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选 ps:此处必须有 不然不知道在哪个地图上
    showTraffic: false, //设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
    hideMarkers: true //设置隐藏路径规划的起始点图标 设置为true
  })
  
   let startLngLat = [117.2147, 39.11712] // 起始的经纬度
   let endLngLat = [126.95717, 45.54774] // 结束的经纬度
  
  // startLngLat:起始坐标
  // endLngLat:终点坐标
  // {waypoints:[]}: 路途中的经纬度坐标
  // function (status, result){} 规划好的回调函数
  driving.search(startLngLat, endLngLat,{
            waypoints: [
              [116.23128, 40.22077], // 北京
              [119.48458, 39.83507], // 秦皇岛
              [121.5255, 38.95223], // 大连
              [123.46987, 41.80515], // 沈阳
              [125.28845, 43.83327] //长春
            ]
          }, function (status: string, result: object) {
    // 未出错时，result即是对应的路线规划方案
  })
})

waypoints 为空的时候 默认走的最便捷路线
在这里插入图片描述

waypoints 自定义坐标之后 按照定一个路线显示

在这里插入图片描述

2.标点规划

创建点覆盖物 marker https://lbs.amap.com/demo/jsapi-v2/example/common/add-several-overlay
或者旧版本marker: https://developer.amap.com/api/jsapi-v2/guide/map/map-layer
自定义图标Icon: https://lbs.amap.com/demo/jsapi-v2/example/marker/custom-icon

      // 加载路线规划插件
      AMap.plugin('AMap.Driving', function () {
        // 初始化路线规划对象
        // https://lbs.amap.com/api/javascript-api-v2/documentation#driving
        const driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          // policy: AMap.DrivingPolicy.LEAST_TIME,
          map: map, //AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选 ps:此处必须有 不然不知道在哪个地图上
          showTraffic: false, // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
          hideMarkers: true //设置隐藏路径规划的起始点图标 设置为true
        })

        // 创建标记函数
        const getMarker = (
          point: number[],
          image: string,
          width = 25,
          height = 30
        ) => {
          const icon = new AMap.Icon({
            size: new AMap.Size(width, height),
            image,
            imageSize: new AMap.Size(width, height)
          })
          const marker = new AMap.Marker({
            position: point,
            icon: icon,
            offset: new AMap.Pixel(-width / 2, -height) // AMap.Pixel 像素坐标，确定地图上的一个像素点。
          })
          return marker
        }
        let startLngLat = [117.2147, 39.11712] // 起始的经纬度
        // 使用标点
        const startMarker = getMarker(startLngLat, startImg)
        map.add(startMarker)
        let endLngLat = [126.95717, 45.54774] // 结束的经纬度
        // 使用标点
        const endMarker = getMarker(endLngLat, endImg)
        map.add(endMarker)
        // startLngLat:起始坐标
        // endLngLat:终点坐标
        // {waypoints:[]}: 路途中的经纬度坐标
        // function (status, result){} 规划好的回调函数
        driving.search(
          startLngLat,
          endLngLat,
          {
            waypoints: [
              [116.23128, 40.22077], // 北京
              [119.48458, 39.83507], // 秦皇岛
              [121.5255, 38.95223], // 大连
              [123.46987, 41.80515], // 沈阳
              [125.28845, 43.83327] //长春
            ]
          },
          function (status: string, result: object) {
            // 未出错时，result即是对应的路线规划方案
            // 运输位置 使用标点
            const curr = [121.5255, 38.95223]
            const currMarker = getMarker(curr, carImg, 33, 20)
            map.add(currMarker)
            // 3s后定位当中间进行缩放
            setTimeout(() => {
              map.setFitView(
                [currMarker] // 覆盖物数组
                // false, // 动画过渡到制定位置
                // [60, 60, 60, 60], // 周围边距，上、下、左、右
                // 10 // 最大 zoom 级别
              )
              map.setZoom(10)
            }, 3000)
          }
        )
      })

在这里插入图片描述
全部代码

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'
onMounted(() => {
  // 调用地图
  initMap()
})

// 高德 v2.0需要配置安全密钥jscode （自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
window._AMapSecurityConfig = {
  securityJsCode: '5fxxxxxxxxxxx03'
}

// 地图
const initMap = () => {
  AMapLoader.load({
    key: '7xxxxxxxxx0', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // .then 异步了 所以直接就能拿到 #map容器了
      const map = new AMap.Map('map', {
        //设置地图容器id
        // viewMode: '3D', //是否为3D地图模式
        zoom: 12, //初始化地图级别
        // center: [105.602725, 37.076636] //初始化地图中心点位置 不设置默认是北京
        mapStyle: 'amap://styles/whitesmoke' // 设置地图样式 远山黛
      })
      // 加载路线规划插件
      AMap.plugin('AMap.Driving', function () {
        // 初始化路线规划对象
        // https://lbs.amap.com/api/javascript-api-v2/documentation#driving
        const driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          // policy: AMap.DrivingPolicy.LEAST_TIME,
          map: map, //AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选 ps:此处必须有 不然不知道在哪个地图上
          showTraffic: false, // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
          hideMarkers: true //设置隐藏路径规划的起始点图标 设置为true
        })

        // 创建标记函数
        const getMarker = (
          point: number[],
          image: string,
          width = 25,
          height = 30
        ) => {
          const icon = new AMap.Icon({
            size: new AMap.Size(width, height),
            image,
            imageSize: new AMap.Size(width, height)
          })
          const marker = new AMap.Marker({
            position: point,
            icon: icon,
            offset: new AMap.Pixel(-width / 2, -height) // AMap.Pixel 像素坐标，确定地图上的一个像素点。
          })
          return marker
        }
        let startLngLat = [117.2147, 39.11712] // 起始的经纬度
        // 使用标点
        const startMarker = getMarker(startLngLat, startImg)
        map.add(startMarker)
        let endLngLat = [126.95717, 45.54774] // 结束的经纬度
        // 使用标点
        const endMarker = getMarker(endLngLat, endImg)
        map.add(endMarker)
        // startLngLat:起始坐标
        // endLngLat:终点坐标
        // {waypoints:[]}: 路途中的经纬度坐标
        // function (status, result){} 规划好的回调函数
        driving.search(
          startLngLat,
          endLngLat,
          {
            waypoints: [
              [116.23128, 40.22077], // 北京
              [119.48458, 39.83507], // 秦皇岛
              [121.5255, 38.95223], // 大连
              [123.46987, 41.80515], // 沈阳
              [125.28845, 43.83327] //长春
            ]
          },
          function (status: string, result: object) {
            // 未出错时，result即是对应的路线规划方案
            // 运输位置 使用标点
            const curr = [121.5255, 38.95223]
            const currMarker = getMarker(curr, carImg, 33, 20)
            map.add(currMarker)
            // 3s后定位当中间进行缩放
            setTimeout(() => {
              map.setFitView(
                [currMarker] // 覆盖物数组
                // false, // 动画过渡到制定位置
                // [60, 60, 60, 60], // 周围边距，上、下、左、右
                // 10 // 最大 zoom 级别
              )
              map.setZoom(10)
            }, 3000)
          }
        )
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
</script>
<template>
    <div id="map">
    </div>
</template>
<style lang="scss" scoped>
#map {
  height: 450px;
  background-color: #F6F7F9;
  overflow: hidden;
 }

在这里插入图片描述
在这里插入图片描述

奔跑的代码！
关注
vue3+ts+高德地图+物流轨迹
weixin_51290060的博客
04-21 1423
vue3+ts+高德地图+物流轨迹
vue3移动端适配的解决方案（老方案）
12-01
Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、分辨率和触控交互方式与桌面端有显著差异。以下是对这一主题的详细探讨： 1. **Vue3 概览**： Vue3 是 Vue.js 的最新版本...
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 9047
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 971
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue高德地图（三）：搜索地点并标记；绘制路线
NOyesNONO_的博客
11-22 2949
用高德api获取用户搜索地点并绘制路线
Vue3集成高德地图：快速上手，实现你的业务需求
爱媳妇儿爱编程
10-16 7842
vue3集成高德地图细节优化总结
vue3高德物流路线
LiliRush的博客
09-10 58
注册&认证个人开发者===>创建web应用====>得到。配置安全密钥 securityJsCode。在vue3项目中使用。
vue3ts + 高德地图实现自定义位置标定、轨迹
weixin_42285486的博客
07-12 601
创建高德地图key和安装依赖参考链接。
咔咔出行解决出行问题基于高德地图APIVueExpress实现的移动端全栈webapp
08-10
"咔咔出行"是一款利用高德地图API，结合Vue.js和Express框架开发的移动端全栈Web应用程序，旨在为用户提供便捷的出行解决方案。该应用通过Vue.js进行前端界面的构建，利用Express作为后端服务器，实现了数据处理和...
vue实现移动端触屏拖拽功能
12-28
vue实现移动端可拖拽浮球，供大家参考，具体内容如下 1 首先创建一个div mousedown=down touchstart.stop=down mousemove=move touchmove.stop=move mouseup=end touchend.stop=end click=showRewardDesc xss=...
vue+高德地图写地图选址组件的方法
10-16
在使用Vue框架与高德地图（AMap）进行地图选址组件开发时，有几个关键技术点和步骤是需要重点...以上是基于给定文件信息的详细知识点总结，希望能够帮助开发者在实现Vue结合高德地图的选址组件开发时，更加得心应手。
vue实现移动端拖动排序
10-14
在本篇文章中，作者将分享如何使用Vue.js来实现移动端拖动排序功能。这一技术在移动端的交互设计中非常常见，如在列表编辑、图片轮播、九宫格布局等场景中。Vue.js是一个构建用户界面的渐进式JavaScript框架，它提供...
vue3 使用高德地图实现线路规划功能
m0_66809960的博客
08-29 320
1.引入百度api值public文件夹index.html。
vue3使用高德地图展示物流信息
weixin_43676252的博客
01-11 624
注册获取key和jscode。
vue3中使用高德地图进行轨迹绘制及播放
qq_54551471的博客
08-05 802
vue3中实现高德地图引入，进行轨迹绘制及轨迹播放
【VUE项目实战】59、订单的物流信息查询功能
程序猿之洞
07-10 4841
接上篇《58、订单修改收货地址的功能》 上一篇我们完成了订单列表的修改收货地址功能，本篇我们来实现订单的物流信息查询功能。我们要实现点击操作列的“物流进度”绿色按钮，弹出该订单的物流信息记录，并以时间轴的形式显示出来： 我们来实现点击“物流进度”绿色按钮弹出物流信息对话框的效果，首先为“物流进度”按钮绑定一个名为“showProgressBox”的click点击事件： 然后在div的内部最后添加物流信息的对话框逻辑： 然后在数据区域定义progressVisible显示属性，默认为false不显示；
Vue3 使用天地图绘制车辆历史轨迹
sea9528的博客
04-21 4614
Vue3中使用天地图，自定义出车辆历史轨迹如下 1. 引入 在index.html 中引入天地图在线链接 <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
vue使用高德地图，点标记+轨迹
最新发布
m0_52769924的博客
09-25 610
【代码】vue使用高德地图，点标记+轨迹。
高德地图动态绘制路线--轨迹巡航（vue）
Lycoriy的博客
01-03 8764
1、将高德地图引入项目 第一步：在index.html文件中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script> <script src="//webapi.amap.com/ui/1.0/main.js">...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值