官网：https://developer.amap.com/api/javascript-api/guide/abc/prepare

准备

1、注册账号申请key
2、准备页面
在public的index.html中添加

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=<%= process.env.VUE_APP_AMAP_JS_KEY %>&plugin=AMap.Geocoder,AMap.PolyEditor,AMap.MarkerClusterer,AMap.MouseTool,AMap.Autocomplete,AMap.PlaceSearch"></script>

3、添加div指定id属性

<div id="mapContainer"></div> 

4、地图初始化

<script>
	// 再次封装的方法
	import { MapContainer } from '@/common/js/amap-utils'
	export default {
		mounted() {
		    setTimeout(() => {
		      this.initMap()
		    }, 20)
		  },
		methods: {
			// 初始化地图
		    initMap() {
		      this.map = new MapContainer({
		        target: 'mapContainer',
		        zoom: 12
		      })
		    }
		}
	}
</script>

再次封装的方法样式：
gitee:https://gitee.com/old_fish_head_cc/gaode-api