前端-Vue3如何引入高德地图并展示行驶轨迹动画

在现代的Web开发中，地图库的应用场景越来越广泛，尤其是地图导航、实时数据展示等功能。在这篇文章中，我们将讨论如何在Vue3项目中引入高德地图并展示行驶轨迹动画。

一、项目初始化

首先，我们需要创建一个新的Vue3项目，如果你尚未安装Vue CLI，可以使用以下命令安装：

npm install -g @vue/cli

然后创建项目：

vue create my-map-app
cd my-map-app

选择默认配置即可。

二、安装高德地图

为了使用高德地图，我们需要引入高德地图的JavaScript API。我们可以在public/index.html文件中添加以下脚本：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script>

记得将你的高德地图API密钥替换为你自己申请的密钥。

三、创建地图组件

在src/components目录下创建一个新的组件MapView.vue。在这个组件中，我们将初始化地图，并展示行驶轨迹动画。

<template>
  <div id="map" style="width: 100%; height: 100vh;"></div>
</template>

<script>
export default {
  name: 'MapView',
  data() {
    return {
      map: null,
      polyline: null,
      path: [
        [116.397428, 39.90923], // 起点
        [116.405285, 39.904989], // 途经点1
        [116.413388, 39.91089],  // 途经点2
        [116.422061, 39.91827],  // 途经点3
        [116.430002, 39.90469],   // 终点
      ],
      index: 0,
      animationTimer: null,
    };
  },
  mounted() {
    this.initMap();
    this.startAnimation();
  },
  beforeDestroy() {
    clearInterval(this.animationTimer);
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        center: this.path[0],
        zoom: 13,
      });

      this.polyline = new AMap.Polyline({
        path: this.path,
        borderWeight: 3,
        strokeColor: '#6C4D93',
        strokeOpacity: 1,
        isOutline: true,
        outlineColor: '#fff',
        outlineWidth: 2,
      });

      this.polyline.setMap(this.map);
    },
    startAnimation() {
      const marker = new AMap.Marker({
        position: this.path[0],
      });
      marker.setMap(this.map);

      this.animationTimer = setInterval(() => {
        if (this.index < this.path.length) {
          marker.setPosition(this.path[this.index]);
          this.index++;
        } else {
          clearInterval(this.animationTimer);
        }
      }, 1000); // 每秒移动到下一个点
    },
  },
};
</script>

<style scoped>
#map {
  position: relative;
  width: 100%;
  height: 100vh;
}
</style>

四、在主应用中使用地图组件

接下来，我们需要在主应用中使用MapView组件。在src/App.vue中进行如下修改：

<template>
  <div id="app">
    <MapView />
  </div>
</template>

<script>
import MapView from './components/MapView.vue';

export default {
  name: 'App',
  components: {
    MapView,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

五、运行项目

在项目根目录下运行以下命令：

npm run serve

访问http://localhost:8080，你将看到高德地图正在展示行驶轨迹的动画效果。

总结

通过上述步骤，我们成功创建了一个Vue3应用，并集成了高德地图，展示了简单的行驶轨迹动画。根据项目需求，你可以进一步扩展地图的功能，比如添加自定义标记、获取实时数据、处理用户交互等。希望这篇文章对你有所帮助！