账号注册

首先得成为高德地图开发者，也就是说你的拥有一个账号，当然有公司账号最好，没有就暂时自己先注册一个。
注册好后，点开控制台，右上角创建一个新应用，选好你需要的环境，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换成你自己的key
VueAMap.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 = false
new Vue({router,store,render: h => h(App)
}).$mount('#app')

配置AMap为全局组件

在globalComponents.js文件中

import AMap from '../../globalComponents/AMap/AMap'; //高德地图组件
export default {install(Vue) {Vue.component('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相关推荐

vue初始化高德地图报错‘AMap‘ is not defined
在使用高德地图的时候在Index.html里面引入了在文件中也这么初始化了可是报错了 'AMap' is not defined' 试了多种办法都没用,最后试着在.eslintrc.js中配置了一 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...

vue 使用高德地图插件 vue-amap

vue 使用高德地图 vue-amap