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

最新推荐文章于 2025-09-09 16:42:48 发布

原创

最新推荐文章于 2025-09-09 16:42:48 发布 · 776 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

预览效果：

一、获取高德地图API的key(相当于获取开发许可权，没有就用不了)

注册高德账号，注册成功后复制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"