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，是基于观察者模式的发布订阅封装

<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