梦里秋 發表於 2026-2-11 14:53:00

高德地图-物流路线

<h1 data-id="heading-0">🧑‍💻 写在开头</h1>
<p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<p>有些时候我们的项目只使用原生一些内容是无法实现一些功能的，所以今天我带来了一个大家都熟悉的，也是生活中常见的一个功能，也就是大家在网购的时候，下单成功后就可以看到自己的订单，当然也可以查看物流信息，那么物流信息中有一个部分就是地图部分，这部分可以让用户看到自己购买的商品到了哪里。那这个功能我们使用原生大概率是无法完成的，这就需要我们使用高德地图、百度地图或者腾讯之类的开放地图类 API 的功能，那么今天我就来和大家分享一下如何去使用高德地图实现这一功能。</p>
<h2 data-id="heading-0">1. 准备工作</h2>
<h3 data-id="heading-1">1.1. 官方文档</h3>
<p>lbs.amap.com/api/javascr…</p>
<h3 data-id="heading-2">1.2. 需要安装的依赖</h3>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm i @amap/amap-jsapi-loader --save</pre>
</div>
<h2 data-id="heading-3">2. 开始</h2>
<p>首先我们需要给地图设置一个容器，命名为<code>container</code></p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;template&gt;
&lt;div id="container"&gt;&lt;/div&gt;
&lt;/template&gt;</pre>
</div>
<p>设置样式</p>
</div>
<div class="code-block-extension-header">&nbsp;
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;stylescoped&gt;
#container{
      padding:0px;
      margin: 0px;
      width: 100%;
      height: 800px;
}
&lt;/style&gt;</pre>
</div>
<h3 data-id="heading-4">2.1. 创建地图组件</h3>
<p>首先我们需要去扩展 window 接口类型的定义，如果不配置就会出现错误：</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202602/2149129-20260211145013895-1595332958.png" alt="ScreenShot_2026-02-11_144455_196" loading="lazy"></p>
<div>
<div>
<p>核心原因：</p>
<p>TypeScript 对 <code>window</code> 的类型有严格定义，默认的 <code>Window</code> 接口里没有 <code>_AMapSecurityConfig</code>，所以会提示 “该属性不存在”。但是高德地图又需要这个属性来配置安全密钥，所以我们就需要来扩展一下 window 类型。</p>
<p>那么我们就需要先来配置一下：按照以下路径创建 global.d.ts 文件</p>
<p>src--&gt;types--&gt;global.d.ts</p>
<p>进入文件配置以下内容：</p>
</div>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">interface Window {
_AMapSecurityConfig: {
      securityJsCode: string
}
}</pre>
</div>
<h3 data-id="heading-5">2.2. 初始化地图组件</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;script setup lang="ts"&gt;
import{onMounted,onUnmounted} from "vue";
import AMapLoader from '@amap/amap-jsapi-loader';

let map = null;
onMounted(()=&gt;{
window._AMapSecurityConfig = {
    securityJsCode: "379c75538f6ae27ee95c983a6feaf358",
};
AMapLoader.load({
    key:"3d0735cef9dc47489452066b7dbe2510",
    version:"2.0",
    plugins:["AMap.scale"]
})
    .then((AMap)=&gt;{
      map = new AMap.Map("container",{
      //设置地图容器的Id
      viewMode:"3D",//是否为3D地图模式
      zoom:11,//初始化地图级别
      center:
      })
    })
    .catch((e)=&gt;{
      console.error(e)
    })
})
onUnmounted(()=&gt;{
map?.destroy();
})
&lt;/script&gt;</pre>
</div>
<h2 data-id="heading-6">3. 路线规划</h2>
<p>lbs.amap.com/demo/javasc…</p>
<p>通过数据处理出起始点和途径点的坐标：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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"
}
]
</pre>
</div>
<p>　　</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 物流轨迹的起始点
const start = logisticsInfo.shift()//起点
const end = logisticsInfo.pop()//终点
const ways = logisticsInfo.map(item =&gt; )//途径点数组
</pre>
</div>
<p>　　</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">AMap.plugin('AMap.Driving', () =&gt; {
//构造路线导航类
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)
    }
})
})</pre>
</div>
<h2 data-id="heading-7">4. 自定义图标</h2>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202602/2149129-20260211145145420-1403765527.webp" alt="de6dc325047142c19f81746b5cb14ba1~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75" loading="lazy"></p>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202602/2149129-20260211145150627-563553967.webp" alt="8322b3e6b50a459196d3e85bd56e3b3e~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75" loading="lazy"></p>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202602/2149129-20260211145154088-1200101497.webp" alt="5a63a855fae740b7ae3907546cc372bc~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pifX-emuw==_q75" loading="lazy"></p>
<p>&nbsp;</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import startImg from '../public/start.png'
import endImg from '../public/end.png'
import carImg from '../public/car.png'</pre>
</div>
<p>自定义图标需要使用到 marker 类</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 自定义开始坐标图片
const startMarker = new AMap.Marker({
position: , // 自定义图标位置
icon:startImg,
map: map // 指定图标显示在哪个地图实例
})
// 自定义终点坐标图片
const endMarker = new AMap.Marker({
position: ,
icon:endImg,
map: map
})
// 自定义当前坐标图片
const currentMarker = new AMap.Marker({
position: ,
icon:carImg,
map: map
})</pre>
</div>
<h2 data-id="heading-8">5. 完整代码实现</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;template&gt;
&lt;h1&gt;地图组件&lt;/h1&gt;
&lt;div id="container" style="width:100%; height: 500px;"&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;script setup lang="ts"&gt;
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 () =&gt; {
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: , // 初始化地图中心点
    plugins:["AMap.Driving"]
});


// 物流轨迹的起始点
const start = logisticsInfo.shift()
const end = logisticsInfo.pop()
const ways = logisticsInfo.map(item =&gt; )
// 自定义开始坐标图片
const startMarker = new AMap.Marker({
    position: , // 自定义图标位置
    icon:startImg,
    map: map // 指定图标显示在哪个地图实例
})
// 自定义终点坐标图片
const endMarker = new AMap.Marker({
    position: ,
    icon:endImg,
    map: map
})
// 自定义当前坐标图片
const currentMarker = new AMap.Marker({
    position: ,
    icon:carImg,
    map: map
})

// 绘制物流轨迹
AMap.plugin('AMap.Driving', () =&gt; {
    //构造路线导航类
    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)
      }
    })
})

})
&lt;/script&gt;</pre>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19604482
頁: [1]
查看完整版本: 高德地图-物流路线