高德地图简单使用

官网：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'
	import { getAddressByLnglat, transformPoint } from '@/common/js/amap-utils'
	export default {
		mounted() {
		    setTimeout(() => {
		      this.initMap()
		    }, 20)
		  },
		methods: {
			// 初始化地图
		    initMap() {
		      this.map = new MapContainer({
		        target: 'mapContainer',
		        zoom: 12
		      })
		    },
		    async getInfo() {
		      const { success, data } = await getPeopleInfo()
		      if (!success) {
		        return
		      }
		      this.infoData = data
		      // 将经纬度转换为地址
		      if (!this.infoData.address) {
		        const { longitude, latitude } = this.infoData
		        if (longitude && latitude) {
		          getAddressByLnglat(transformPoint([longitude, latitude], false), address => {
		            this.$set(this.infoData, 'address', address)
		          })
		        }
		      }
		    } 
		}
	}
</script>

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