这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S
这篇文章主要介绍了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，是基于观察者模式的发布订阅封装
<template>
<div class="_map">
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box>
<el-amap ref="map" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo" :events="events">
<el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content" ></el-amap-marker>
</el-amap>
</div>
<div class="adrs">
<ul>
<li class="" v-for="(item,index) in list" :key="index" :class="currIndex == index ? 'active':''" @click="select(item,index)">
<p class="address">{{item.address}}</p>
<p class="nm">{{item.name}}</p>
</li>
</ul>
</div>
</div>
</template>
<style>
.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;
}
</style>
<script>
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);
}
});
*
* */
</script>
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。