快捷導(dǎo)航

前端Vue3引入高德地圖并展示行駛軌跡動畫的步驟

更新時間：2024年09月04日 10:18:55 作者：大嘴史努比

最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動畫的相關(guān)資料,需要的朋友可以參考下

預(yù)覽效果：

一、獲取高德地圖API的key(相當(dāng)于獲取開發(fā)許可權(quán)，沒有就用不了)

注冊高德賬號，注冊成功后復(fù)制 Key 值到組件，就可以使用。

二、安裝依賴

cnpm install @amap/amap-jsapi-loade

三、頁面代碼

<template>
  <div class="h-md flex justify-center">
    <topBar></topBar>
    <div class="h-[600px] w-[1000px] mt-40" id="container"></div>
  </div>
  <div
    class="fixed right-[30px] bottom-[30px] p-4 rounded-3xl border shadow-md border-blue-400 shadow-blue-700"
  >
    <h4>軌跡回放控制</h4>
    <div class="flex mb-1">
      <a-button class="mr-1" @click="startAnimation">開始動畫</a-button>
      <a-button @click="pauseAnimation">暫停動畫</a-button>
    </div>
    <div class="flex">
      <a-button class="mr-1" @click="resumeAnimation">繼續(xù)動畫</a-button>
      <a-button @click="stopAnimation">停止動畫</a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import topBar from '../shopCenter/topBar.vue'
import AMapLoader from '@amap/amap-jsapi-loader'

let map = null
const marker = ref()
const lineArr = ref([
  [116.478935, 39.997761],
  [116.478939, 39.997825],
  [116.478912, 39.998549],
  [116.478912, 39.998549],
  [116.478998, 39.998555],
  [116.478998, 39.998555],
  [116.479282, 39.99856],
  [116.479658, 39.998528],
  [116.480151, 39.998453],
  [116.480784, 39.998302],
  [116.480784, 39.998302],
  [116.481149, 39.998184],
  [116.481573, 39.997997],
  [116.481863, 39.997846],
  [116.482072, 39.997718],
  [116.482362, 39.997718],
  [116.483633, 39.998935],
  [116.48367, 39.998968],
  [116.484648, 39.999861]
])

//開始動畫
const startAnimation = () => {
  marker.value.moveAlong(lineArr.value, {
    duration: 500,
    autoRotation: true
  })
}
//暫停動畫
const pauseAnimation = () => {
  marker.value.pauseMove()
}
//繼續(xù)動畫
const resumeAnimation = () => {
  marker.value.resumeMove()
}
//停止動畫
const stopAnimation = () => {
  marker.value.stopMove()
}

onMounted(() => {
  AMapLoader.load({
    key: '111111111111111111111111', // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
    version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
    plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // JSAPI2.0 使用覆蓋物動畫必須先加載動畫插件
      AMap.plugin('AMap.MoveAnimation', function () {
        map = new AMap.Map('container', {
          // 設(shè)置地圖容器id
          viewMode: '3D', // 是否為3D地圖模式
          zoom: 17, // 初始化地圖級別
          resizeEnable: true,
          //   center: [116.397428, 39.90923] // 初始化地圖中心點(diǎn)位置
          center: [116.478935, 39.997761] // 初始化地圖中心點(diǎn)位置
        })

        //小車配置
        marker.value = new AMap.Marker({
          map: map,
          position: [116.478935, 39.997761],
          icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
          offset: new AMap.Pixel(-13, -26)
        })

        // 繪制軌跡
        var polyline = new AMap.Polyline({
          map: map,
          path: lineArr.value,
          showDir: true,
          strokeColor: '#28F', //線顏色
          // strokeOpacity: 1,     //線透明度
          strokeWeight: 6 //線寬
          // strokeStyle: "solid"  //線樣式
        })

        //移動后的軌跡
        var passedPolyline = new AMap.Polyline({
          map: map,
          strokeColor: '#AF5', //線顏色
          strokeWeight: 6 //線寬
        })

        marker.value.on('moving', function (e) {
          console.log('!!')
          passedPolyline.setPath(e.passedPath)
          map.setCenter(e.target.getPosition(), true)
        })

        map.setFitView()
      })
    })
    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped></style>

官網(wǎng)示例：軌跡回放-點(diǎn)標(biāo)記-示例中心-JS API 2.0 示例 | 高德地圖API (amap.com)