vue-amap组件怎么在vue项目中使用

vue-amap组件怎么在vue项目中使用？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

首先

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

效果图

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。