官网: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