这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

首先

npm install -S vue-amap

然后在 main.js

import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖

Vue.use(VueAMap);

// 初始化vue-amap

VueAMap.initAMapApiLoader({

// 高德的key

key: 'you key',

// 插件集合

plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],

v: '1.4.4'

});

map.vue文件

其中有个BUS.js，是基于观察者模式的发布订阅封装

.amap-page-container{

height: 300px;

position: relative;

}

.search-box {

position: absolute !important;

top: 25px;

left: 20px;

z-index: 200 !important;

}

.amap-demo {

height: 300px;

}

.amap-logo {

display: none;

}

.amap-copyright {

bottom:-100px;

display: none;

}

.amap-scalecontrol{

bottom: 4px !important;

}

.amap-geolocation-con{

bottom: 30px !important;

z-index: 199 !important;

}

ul li.active{

color: deeppink;

}

export default {

name: 'amap-page',

components: {},

data() {

var me = this;

me.city = me.city || '武汉';

return {

list:[],

currIndex:0,

zoom: 16,

center: [114.397169, 30.50576],

events:{

init: (o) => {

o.setCity(me.city,result => {

console.log("----------setCity",result);

if(result && result.length > 0){

me.zoom = 16;

me.makerConf.position = result;

me.getList(result);

}

});

//去掉logo

document.getElementsByClassName("amap-logo")[0].style.display = "none";

},

"dragend":function(e){

//console.log("dragging",e,this.getCenter());

var point = this.getCenter();

var pos = [point.lng,point.lat];

me.makerConf.position = [point.lng,point.lat];

me.getList(pos);

}

},

makerConf: {

position: [114.397169, 30.50576],

content:""

},

searchOption: {

city: me.city,

citylimit: true

},

plugin:[

'ToolBar',

'Scale',

{

pName: 'Geolocation',

events: {

init(o) {

},

complete:function(result){

//定位成功

var address = result.formattedAddress

var point = result.position;

var obj = {

address:address,

name:"",

location:point

}

me.list = [obj];

me.makerConf.position = [point.lng,point.lat];

},

error:function(){

}

}

}

]

};

},

created(){

var me = this;

},

mounted(){

},

methods: {

select:function(item,index){

var me = this;

me.currIndex = index;

var point = item.location;

me.makerConf.position = [point.lng,point.lat];

me.center = [point.lng,point.lat];

},

//this.$refs.map.$$getCenter()

getList:function(result){

//获取列表

var me = this;

me.$Geocoder({

lnglatXY:result,

success:function(res){

if(res.regeocode && res.regeocode.pois){

me.list = res.regeocode.pois;

}else{

me.list = [];

}

},

error:function(res){

me.list = [];

}

});

},

onSearchResult(pois) {

//搜索

let latSum = 0;

let lngSum = 0;

var me = this;

var mymap = me.$refs.map.$$getInstance();

if (pois && pois.length > 0) {

//如果长度为1则无需转化

var poi = pois[0];

var lng = poi["lng"];

var lat = poi["lat"];

me.center = [lng, lat];

me.makerConf.position = [lng, lat];

//me.makerConf.content = poi.name;

me.list = pois;

}else{

me.list = [];

}

},

$Geocoder(options){

//将坐标点转化为，详细地址

options = options || {};

if(AMap){

AMap.plugin(['AMap.Geocoder'], () => {

const geocoder = new AMap.Geocoder({

radius: options.radius || 1000,

extensions: options.extensions || "all"

})

var lnglatXY = options.lnglatXY || [114.397169, 30.50576]; //已知点坐标

geocoder.getAddress(lnglatXY, function(status, result) {

if (status === 'complete' && result.info === 'OK') {

options.success && options.success(result);

}else{

options.error && options.error(status,result);

}

});

});

}

}

},

"watch":{

list:function(){

this.currIndex = 0;

}

}

};

/*

me.$Geocoder({

lnglatXY:[center.lng, center.lat],

success:function(res){

console.log(res);

}

});

*

* */

bus.js

let instance = null;

class EventBus {

constructor() {

if (!instance) {

this.events = {};

instance = this;

}

return instance;

}

$emit(event, message) {

if (!this.events[event])

return;

const callbacks = this.events[event];

for (let i = 0, l = callbacks.length; i < l; i++) {

const callback = callbacks[i];

callback.call(this, message);

}

}

$on(event, callback) {

if (!this.events[event])

this.events[event] = [];

this.events[event].push(callback);

}

}

export default new EventBus();

效果图

https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。