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

 
 
  .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;
  }
 
 

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

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