当前位置：首页 > news >正文

高德地图-物流路线

news 2026/3/27 5:14:27

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

有些时候我们的项目只使用原生一些内容是无法实现一些功能的，所以今天我带来了一个大家都熟悉的，也是生活中常见的一个功能，也就是大家在网购的时候，下单成功后就可以看到自己的订单，当然也可以查看物流信息，那么物流信息中有一个部分就是地图部分，这部分可以让用户看到自己购买的商品到了哪里。那这个功能我们使用原生大概率是无法完成的，这就需要我们使用高德地图、百度地图或者腾讯之类的开放地图类 API 的功能，那么今天我就来和大家分享一下如何去使用高德地图实现这一功能。

1. 准备工作

1.1. 官方文档

lbs.amap.com/api/javascr…

1.2. 需要安装的依赖

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

2. 开始

首先我们需要给地图设置一个容器，命名为container

<template><div id="container"></div>
</template>

设置样式

<style  scoped>#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>

2.1. 创建地图组件

首先我们需要去扩展 window 接口类型的定义，如果不配置就会出现错误：

ScreenShot_2026-02-11_144455_196

核心原因：

TypeScript 对 window 的类型有严格定义，默认的 Window 接口里没有 _AMapSecurityConfig，所以会提示 “该属性不存在”。但是高德地图又需要这个属性来配置安全密钥，所以我们就需要来扩展一下 window 类型。

那么我们就需要先来配置一下：按照以下路径创建 global.d.ts 文件

src-->types-->global.d.ts

进入文件配置以下内容：

interface Window {_AMapSecurityConfig: {securityJsCode: string}
}

2.2. 初始化地图组件

<script setup lang="ts">
import  {onMounted,onUnmounted} from "vue";
import AMapLoader from '@amap/amap-jsapi-loader';let map = null;
onMounted(()=>{window._AMapSecurityConfig = {securityJsCode: "379c75538f6ae27ee95c983a6feaf358",};AMapLoader.load({key:"3d0735cef9dc47489452066b7dbe2510",version:"2.0",plugins:["AMap.scale"]}).then((AMap)=>{map = new AMap.Map("container",{//设置地图容器的IdviewMode:"3D",//是否为3D地图模式zoom:11,//初始化地图级别center:[116.397428, 39.90923]})}).catch((e)=>{console.error(e)})
})
onUnmounted(()=>{map?.destroy();
})
</script>

3. 路线规划

lbs.amap.com/demo/javasc…

通过数据处理出起始点和途径点的坐标：

const logisticsInfo = [{"latitude": "23.129152403638752","longitude": "113.42775362698366"},{"latitude": "30.454012","longitude": "114.42659"},{"latitude": "31.93182","longitude": "118.633415"},{"latitude": "31.035032","longitude": "121.611504"}
]

// 物流轨迹的起始点const start = logisticsInfo.shift()//起点const end = logisticsInfo.pop()//终点const ways = logisticsInfo.map(item => [item.longitude, item.latitude])//途径点数组

AMap.plugin('AMap.Driving', () => {//构造路线导航类var driving = new AMap.Driving({map: map, // 指定绘制的路线轨迹显示到map地图showTraffic: false, // 关闭实时交通路况hideMarkers: false // 隐藏默认的图标});// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(start.longitude, start.latitude), new AMap.LngLat(end.longitude, end.latitude), {waypoints:ways, // 途经点这里是一个二维数组的格式[[经度, 维度], [经度, 维度]]},function (status: string, result: object) {if (status === 'complete') {console.log('绘制驾车路线完成')// 调整视野达到最佳显示区域map.setFitView([ startMarker, endMarker, currentMarker ])} else {console.log('获取驾车数据失败：' + result)}})
})

4. 自定义图标

de6dc325047142c19f81746b5cb14ba1~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75

8322b3e6b50a459196d3e85bd56e3b3e~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75

5a63a855fae740b7ae3907546cc372bc~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75

import startImg from '../public/start.png'
import endImg from '../public/end.png'
import carImg from '../public/car.png'

自定义图标需要使用到 marker 类

// 自定义开始坐标图片
const startMarker = new AMap.Marker({position: [start.longitude, start.latitude], // 自定义图标位置icon:startImg,map: map // 指定图标显示在哪个地图实例
})
// 自定义终点坐标图片
const endMarker = new AMap.Marker({position: [end.longitude, end.latitude],icon:endImg,map: map
})
// 自定义当前坐标图片
const currentMarker = new AMap.Marker({position: [currentLocationInfo.longitude, currentLocationInfo.latitude],icon:carImg,map: map
})

5. 完整代码实现

<template><h1>地图组件</h1><div id="container" style="width:100%; height: 500px;"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '../public/start.png'
import endImg from '../public/end.png'
import carImg from '../public/car.png'
// 接口返回的数据
const logisticsInfo = [{"latitude": "23.129152403638752","longitude": "113.42775362698366"},{"latitude": "30.454012","longitude": "114.42659"},{"latitude": "31.93182","longitude": "118.633415"},{"latitude": "31.035032","longitude": "121.611504"}
]
// 当前坐标
const currentLocationInfo = {latitude: "31.93182",longitude: "118.633415"
}
window._AMapSecurityConfig = {securityJsCode: '2af1e64a8f6b16d6d79bfa8162c46755'
}
onMounted(async () => {const AMap = await AMapLoader.load({key: '9ac7a2671565e21bc21aca6df07eb5cb',version: '2.0'})// 地图的创建var map = new AMap.Map('container', {viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'zoom:16, // 初始化地图层级center: [116.209804,40.149393], // 初始化地图中心点plugins:["AMap.Driving"]});// 物流轨迹的起始点const start = logisticsInfo.shift()const end = logisticsInfo.pop()const ways = logisticsInfo.map(item => [item.longitude, item.latitude])// 自定义开始坐标图片const startMarker = new AMap.Marker({position: [start.longitude, start.latitude], // 自定义图标位置icon:startImg,map: map // 指定图标显示在哪个地图实例})// 自定义终点坐标图片const endMarker = new AMap.Marker({position: [end.longitude, end.latitude],icon:endImg,map: map})
// 自定义当前坐标图片const currentMarker = new AMap.Marker({position: [currentLocationInfo.longitude, currentLocationInfo.latitude],icon:carImg,map: map})// 绘制物流轨迹AMap.plugin('AMap.Driving', () => {//构造路线导航类var driving = new AMap.Driving({map: map, // 指定绘制的路线轨迹显示到map地图showTraffic: false, // 关闭实时交通路况hideMarkers: true // 隐藏默认的图标});// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(start.longitude, start.latitude), new AMap.LngLat(end.longitude, end.latitude), {waypoints:ways, // 途经点这里是一个二维数组的格式[[经度, 维度], [经度, 维度]]},function (status: string, result: object) {if (status === 'complete') {console.log('绘制驾车路线完成')// 调整视野达到最佳显示区域map.setFitView([ startMarker, endMarker, currentMarker ])} else {console.log('获取驾车数据失败：' + result)}})})})
</script>