vue 使用高德地图 vue-amap
账号注册高德地图插件安装页面引入与组件配置创建全局组件AMapmain.js页面引入vue-amap以及globalComponents.js配置AMap为全局组件AMap页面实现父组件调用AMap组件账号注册
首先得成为高德地图开发者，也就是说你的拥有一个账号，当然有公司账号最好，没有就暂时自己先注册一个。
注册好后，点开控制台，右上角创建一个新应用，选好你需要的环境，vue的话估计基本都是web端吧，然后就可以看到你的开发需要的key了
高德地图插件安装
首先说明，这里示例项目使用vue-cli3脚手架，不熟悉的可以先去看看vue-cli3创建项目相关。
npm安装vue-amap
npm install vue-amap --save
页面引入与组件配置
我这里的项目因为多个地方都会用的地图，所以将地图这一块抽离出来做一个单独的组件，并且是全局组件，方便页面引用
创建全局组件AMap
创建全局地图组件文件AMap.vue以及全局组件配置文件globalComponents.js
项目目录结构如图所示
main.js页面引入vue-amap以及globalComponents.js
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import globalComponents from './assets/commonJs/globalComponents' //全局组件配置文件import VueAMap from 'vue-amap'; // 高德地图import {AMapKey} from './assets/commonJs/constDatas'//AMapKey是高德地图开发key，我这里放到了一个专门的文件管理，你也可以不必这样做。Vue.use(VueAMap) //插件使用声明Vue.use(globalComponents) //插件使用声明//下面是vue-amap初始化，请将AMapKey换成你自己的keyVueAMap.initAMapApiLoader({key:AMapKey,plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', ],v: '1.4.4'})Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)}).$mount('#app')
配置AMap为全局组件
在globalComponents.js文件中
import AMap from '../../globalComponents/AMap/AMap'; //高德地图组件export default {install(Vue) {ponent('AMap', AMap)}};
AMap页面实现
**这里强调一下，想要使用好vue-amap，首先得在页面引入AMap地图标签创建地图实例，后面才可以使用相应的API，有些小伙伴可能并不需要展示地图，只是想使用某个API,比如根据经纬度获取地址，所以在main.js中配置好后就迫不及待的去相应的页面来这么一段
AMap.plugin(‘AMap.Geocoder’, ()=> {
let geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city:citycode
})
geocoder.getAddress([lng,lat], (status, result)=> {
…
})
**
然后你看到可能就是下面这种
还有你可能直接在页面引入，比如这样 import AMap from ‘vue-amap’，然后你很可能看到下面这样的报错。
其他废话不多说了，总之必须得先在html部分用标签创建好实例，其他API才可以使用。废话不多说，上代码，先看html部分
<template><div class="amapBox" :style="{height}"><el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin" :center="mapCenter" :events="events" ref="map"><el-amap-markervid="component-marker":position="markPosition":icon="require('../../assets/images/mapMark.png')":draggable="true":raiseOnDrag="true":events="markEvents"></el-amap-marker></el-amap></div></template>
el-amap即vue-amap创建实例的标签，class不用说，vid照写就好，是地图组件id，另外plugin是地图插件配置，center是地图的中心位置，events是事件
el-amap-marker是地图标记标签，其中position是标签位置，icon是标记图标，可以使用网络图片或者本地图片，本地图片请使用require引入，draggable表示是否可以拖动标记，events是事件
<!--js部分--><script>export default {name: 'AMap',//考虑到动态需求，允许默认中心点和地图高度从父组件传递来，如果不传递，则使用默认值props:{center:{type:Array,default:()=>{return [106.61994874,26.64158513]}},height:{type:String,default:'6rem'}},data() {return {mapCenter: [],//地图中心坐标数组，因为可能会从父组件传递，所以初始为空，将会在created生命周期中赋值loaded: false,/*events是包含地图事件的对象，init是地图初始化时触发，moveeend地图拖动时触发，click点击地图触发，zoomchange地图缩放级别更改后触发*/events: {init:this.mapInit,'moveend': this.moveend,'zoomchange': this.zoomchange,'click': this.mapClick},markEvents:{//标记事件click:this.markClick, //标记点击触发dragend:this.markDragend //标记拖动触发},plugin: [ //插件{pName: 'Geolocation', //定位插件events: {init:this.getGolocationInit //定位初始化函数}},'Autocomplete','PlaceSearch','Scale','OverView','PolyEditor','ToolBar',],markPosition:[106.61994874,26.64158513],//标记物位置cityInfo:{},//当前城市信息}},methods: {// 地图初始化函数mapInit(o){// console.log(o.getCenter())// console.log(this.$refs.map.$$getInstance())o.getCity(result => {this.cityInfo=resultthis.$emit('getInitCityInfo',result)//获取初始化城市信息并传递给父组件})},//点图点击事件async mapClick(e){// console.log(e)let {lng,lat} =e.lnglatthis.markPosition=[lng,lat]this.$emit('getMapClickLngLat',[lng,lat])//获取点击地图点经纬度并传递给父组件let addressInfo=await this.getAddressFromLngLat(lng,lat)this.$emit('getAddressInfo',addressInfo)//点击地图获取地址并传递给父组件},//定位初始化getGolocationInit(o){o.getCurrentPosition((status, result) => {if (result && result.position) {// console.log(result)let {position,addressComponent,formattedAddress}=resultlet {lng,lat}=positionthis.mapCenter = [lng, lat]this.markPosition = [lng, lat]this.loaded = true;this.$nextTick();this.$emit('getGolocationInitAddressInfo',{ //获取定位信息并传递给父组件addressComponent,formattedAddress,lng,lat})}});},//地图移动moveend(){},//地图比例改变zoomchange(){},markClick(){// alert('xxx')},//根据经纬度获取地址getAddressFromLngLat(lng,lat){let {cityInfo}=thislet {citycode}=cityInforeturn new Promise((resolve,reject)=>{AMap.plugin('AMap.Geocoder', ()=> {let geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity:citycode})geocoder.getAddress([lng,lat], (status, result)=> {// console.log(status,result)if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息let {addressComponent,formattedAddress}=result.regeocodelet {province,city,district,township}=addressComponentresolve({formattedAddress,province,city,district,township})}})})})},//标记点拖动结束async markDragend(e){let {lng,lat} =e.lnglatlet addressInfo=await this.getAddressFromLngLat(lng,lat)this.$emit('getAddressInfo',addressInfo)//拖动结束获取地址并传递给父组件},//通过地址查询经纬度getLngLatFromAddress(address){if(!address) returnlet {cityInfo}=thislet {citycode}=cityInforeturn new Promise((resolve,reject)=>{AMap.plugin('AMap.Geocoder', ()=> {let geocoder = new AMap.Geocoder({city:citycode})geocoder.getLocation(address, (status, result) =>{let lngLatArr=[]let {geocodes=[]} = resultgeocodes.forEach((item,index)=>{let {lng,lat}=item.locationlngLatArr.push({lng,lat})})resolve(lngLatArr)})})})},//搜索提示getSearchAddresList(keyword){let {cityInfo}=thislet {citycode}=cityInforeturn new Promise((resolve,reject)=>{AMap.plugin('AMap.Autocomplete', ()=>{// 实例化Autocompletelet autoOptions = {//city 限定城市，默认全国city: citycode}let autoComplete= new AMap.Autocomplete(autoOptions);autoComplete.search(keyword, (status, result)=> {// 搜索成功时，result即是对应的匹配数据if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息resolve(result.tips)}})})})}},created(){this.mapCenter=this.center},mounted() {}}</script>
下面css部分，高德地图组件本身默认没有宽高，需要继承父级的宽高，所以需要给el-map标签父级设置宽高
<style scoped lang="less">.amapBox{width:100%;}</style>
地图组件已经完成，可以愉快的调用了
父组件调用AMap组件
AMap已经配置为全局组件，所以本页面可以直接使用，不再需要引入和注册组件
<template><div class="mapBox columnStart"><div class="mapSearchBox rowStart"><img src="../../../assets/images/search.png" class="searchIcon"/><input placeholder="搜索地点" class="mapInput" v-model="searchName" @input="searchAddress"/></div><AMap @getAddressInfo="getAddressInfo" ref="amapComponent"/><ul class="mapAddressBox"><li class="rowBtween mapAddressLi" v-for="(address,index) in addresses" :key="index" @click="chooseAddress(index)"><div class="addressBox columnStart"><div class="addressName">{{address.name}}</div><span class="detailAddress gray999">{{address.formattedAddress}}</span></div><van-icon name="success" color="#4491FA" size="18" v-if="activeIndex===index"/></li></ul></div></template><script>export default {name: 'ChooseAddress',data() {return {routerData:{},//路由跳转携带点数据activeIndex:null,//选择点地址下标addresses:[],//搜索出来的地址searchName:'',//要搜索的地址名称fromRouteName:'',//来源路由名称}},methods: {//选择地址chooseAddress(index){this.activeIndex=index},//获取地址getAddressInfo(addressInfo){// console.log(addressInfo)let {formattedAddress,province,city,district,township}=addressInfothis.addresses=[{name:`${township}（${city}${district}）`,formattedAddress}]this.activeIndex=0},//搜索地址async searchAddress(){let {searchName}=thislet addressInfos=await this.$refs.amapComponent.getSearchAddresList(searchName)// console.log(addressInfos)this.addresses=[]for(let i=0;i<addressInfos.length;i++){this.addresses.push({name:addressInfos[i].name,formattedAddress:`${addressInfos[i].district}${addressInfos[i].address}`})}},//确定选择地址sureChooseAddress(){let {addresses,activeIndex,routerData,fromRouteName}=thisrouterData.mapAddressInfo=addresses[activeIndex]this.$globalMethods.batchDispatchFun([{fun:'changeShowRightBtn',data:false},])this.$router.replace({name:fromRouteName,params:{routerData,}})}},mounted() {let {topTitle='地图',routerData={},fromRouteName=''} = this.$route.paramsthis.routerData=routerDatathis.fromRouteName=fromRouteNamethis.$globalMethods.batchDispatchFun([{fun:'changeTopTitle',data:topTitle},])}}</script><style scoped lang="less">.mapBox{background:#f5f5f5;.mapSearchBox{width:7.1rem;height:.7rem;margin:.2rem auto;background:#ffffff;border:solid .01rem #cccccc;-webkit-border-radius: .1rem;-moz-border-radius: .1rem;border-radius: .1rem;padding:0 .2rem;.searchIcon{width:.36rem;height:.36rem;margin-right:.2rem;}.mapInput{width:6rem;border:none;}}.mapAddressBox{padding:0.2rem 0 1rem .2rem;width:100%;background:#ffffff;height:5rem;overflow:auto;.mapAddressLi{padding:.2rem 0.2rem .2rem 0;border-bottom:solid .01rem #e6e6e6;.addressBox{align-items:flex-start;.addressName{max-width:6rem;overflow:hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}.detailAddress{margin-top:.1rem;font-size:.24rem;max-width:6rem;overflow:hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}}}}}</style>
如果觉得《vue 使用高德地图插件 vue-amap》对你有帮助，请点赞、收藏，并留下你的观点哦！
