使用vue-amap 在vue中引入高德地图

安装vue-amap

npm  i  vue-amap  --save

在main.js 中引入高德地图（注意：高德地图的key需要自己去官网申请）

VueAMap.initAMapApiLoader({
  key: 'e1dedc6bdd765d46693986ff7ff969f4',
  plugin: [
    'AMap.Autocomplete', 
    'AMap.PlaceSearch', 
    'AMap.Scale', 
    'AMap.OverView', 
    'AMap.ToolBar', 
    'AMap.MapType', 
    'AMap.PolyEditor', 
    'AMap.CircleEditor'
  ],
  uiVersion: '1.0', // ui库版本，不配置不加载,
  v: '1.4.4'
});

在你需要引入高德地图的页面写入：

import  { lazyAMapApiLoaderInstance }  from "vue-amap";

创建一个地图容器：

<div id="amapContainer" ></div>

记得要给这个容器宽高😂 我之前就是忽略了 找了好久的原因才发现没给宽高

<style scoped>
  #amapContainer{
    width:500px;
    height:500px;
  }
</style&g