vue如何引入高德地图插件

最简单的方法

使用vue-amap 一套专门用于vue的高德地图插件

1. 安装：npm install vue-amap --save
2. 在main.js中插入 其中key从应用中自己设置添加即可我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app

   import AMap from 'vue-amap'
   
   Vue.use(AMap)
   // 初始化地图
   AMap.initAMapApiLoader({
     key: '自己的key',
     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']    // 插件集合
   })
   

3.  在组件中直接调用插件中封装好的组件就可以，给个高度

   <template>
     <div class="hh">
       <el-amap vid="amapDemo" ></el-amap>
     </div>
   </template>
   
   <style lang='scss'>
   .hh{
     height: 100vh;
   
   }
   </style>

4. 但是如果写完后发现要是报错例如图片这样

首先，你可以尝试执行以下步骤：

1. 安装 @types/vue-amap 声明文件：

   npm install --save-dev @types/vue-amap

2. 确保你的 TypeScript 配置文件（通常是 tsconfig.json）中具有以下配置项：

                

{
  "compilerOptions": {
    "types": ["node", "vue-amap"]
  }
}

如果上述步骤仍然无法解决问题，那么可能需要额外的操作。以下是一些备选方案：

1. 手动创建一个声明文件：

• 在你的项目根目录下创建一个名为 vue-amap.d.ts 的新文件。

• 在文件中添加以下代码：

        

declare module 'vue-amap' {
    const AMap: any;
    export default AMap;
}

运行即可