高德地图-物流路线

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

1. 准备工作

1.1. 官方文档

lbs.amap.com/api/javascr...

1.2. 需要安装的依赖

css 复制代码

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

2. 开始

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

xml 复制代码

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

设置样式

xml 复制代码

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

2.1. 创建地图组件

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

核心原因：

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

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

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

进入文件配置以下内容：

csharp 复制代码

interface Window {
  _AMapSecurityConfig: {
      securityJsCode: string
  }
}

2.2. 初始化地图组件

xml 复制代码

<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",{
        //设置地图容器的Id
        viewMode:"3D",//是否为3D地图模式
        zoom:11,//初始化地图级别
        center:[116.397428, 39.90923]
      })
    })
    .catch((e)=>{
      console.error(e)
    })
})
onUnmounted(()=>{
  map?.destroy();
})
</script>

3. 路线规划

lbs.amap.com/demo/javasc...

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

ini 复制代码

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"
  }
]

arduino 复制代码

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

arduino 复制代码

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. 自定义图标

javascript 复制代码

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

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

arduino 复制代码

// 自定义开始坐标图片
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. 完整代码实现

xml 复制代码

<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>