amap vueamap 与_vue 使用高德地图vue-amap组件过程解析

这篇文章主要介绍了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，是基于观察者模式的发布订阅封装

• {{item.address}}

  {{item.name}}

.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();

效果图

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

希望与广大网友互动？？

点此进行留言吧！