vue3+ts+高德地图+物流轨迹

1.  高德地图-初始化

 准备工作：JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

vue中使用：https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

注册登录完毕-->创建web应用-->得到key和jscode

安装地图

npm add @amap/amap-jsapi-loader

扩展 Window 的类型 types/global.d.ts

interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
} 

加载高德地图需要的资源，组件初始化的时候

import AMapLoader from '@amap/amap-jsapi-loader'

onMounted(async () => {
  // ... 省略 ...
  AMapLoader.load({
    key: '639d4746cedd0f218a1ce498f10d9559',
    version: '2.0'
  }).then((AMap) => {
    // 使用 Amap 初始化地图
  })
})

初始化地图

const map = new AMap.Map('map', {
  mapStyle: 'amap://styles/whitesmoke',//https://lbs.amap.com/api/javascript-api-v2/guide/map/map-style
  zoom: 12 //https://lbs.amap.com/api/javascript-api-v2/documentation#mapsetzoom
})

2.物流轨迹

• 绘制轨迹
• 关闭默认覆盖物
• 绘制位置

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getMedicalOrderLogistics } from '@/api/order'
import type { Logistics } from '@/types/order'
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'
window._AMapSecurityConfig = {
  securityJsCode: '7713f4ba19ee015c27a7a23bd34bf1b8'
}

// 获取物流信息
const logistics = ref<Logistics>()
const route = useRoute()
onMounted(async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  logistics.value = res.data

  //   操作map地图元素
  AMapLoader.load({
    key: '639d4746cedd0f218a1ce498f10d9559',
    version: '2.0'
  }).then((AMap) => {
    // 1.使用 Amap 初始化地图
    const map = new AMap.Map('map', {
      mapStyle: 'amap://styles/macaron',
      zoom: 12 //这个越大 地图越大 看的地图详细
    })
    // 2.加载路线规划组件
    AMap.plugin('AMap.Driving', function () {
      // 初始化路线规划对象
      const driving = new AMap.Driving({
        map: map, //在那个地图上规划
        showTraffic: false, //隐藏路途拥堵状态
        hideMarkers: true //隐藏覆盖物 标记点(但是此时起点终点的标记也没有了，需要自己绘制)
      })
      // 使用经纬度数组中的第一个数据：起始坐标
      // 使用经纬度数组中的最后一个数据：终点坐标
      if (logistics.value && logistics.value?.logisticsInfo.length >= 2) {
        const list = [...logistics.value.logisticsInfo]
        // [
        //   ({ latitude: '30.454012', longitude: '114.42659' },
        //   { latitude: '31.93182', longitude: '118.633415' })
        // ]
        // 起点
        const start = list.shift()
        // 绘制起点图标
        var startMarker = new AMap.Marker({
          icon: startImg,
          position: [start?.longitude, start?.latitude]
        })
        map.add(startMarker) // 单独将点标记添加到地图上
        // 终点
        const end = list.pop()
        // 绘制终点图标
        var endMarker = new AMap.Marker({
          icon: endImg,
          position: [end?.longitude, end?.latitude]
        })
        map.add(endMarker) // 单独将点标记添加到地图上
        // 此时list就剩下 路途中经过的经纬度对象
        //四个参数： 起始点，终点，路途中的经纬度，规划好之后的回调函数
        driving.search(
          [start?.longitude, start?.latitude],
          [end?.longitude, end?.latitude],
          { waypoints: list.map((item) => [item.longitude, item.latitude]) },
          function (status: string, result: object) {
            //未出错时候，result就是对应的路线规划完的方案
            // 等路径规划完才能看到途径的位置图标在哪里显示
            // 绘制运输中货车的位置
            var currentMarker = new AMap.Marker({
              icon: carImg,
              position: [
                logistics.value?.currentLocationInfo.longitude,
                logistics.value?.currentLocationInfo.latitude
              ],
              anchor: 'center' //调整货车图片的定位
            })
            map.add(currentMarker)
            // 3s后定位到货车，放大到地图，看的详细你现在运送到哪了
            setTimeout(() => {
              map.setFitView([currentMarker])
              map.setZoom(10) //缩放级别
            }, 3000)
          }
        )
      }
    })
  })
})
</script>

<template>
      <!-- 地图 -->
      <div id="map"></div>

</template>