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'],
  v: '1.4.4'
	
});

　

　map.vue文件

 其中有个BUS.js，是基于观察者模式的发布订阅封装    

<template>
    <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>
  </template>

  <style>
  	.amap-page-container{
  		height: 300px;
  		position: relative;
  	}
  	.search-box {
      position: absolute !important; 
      top: 25px;
      left: 20px;
    }
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
  	
	import Bus from './bus';
    export default {
      name: 'amap-page',
      components: {},
      data() {
        return {
          zoom: 16,
          center: [121.5273285, 31.21515044],
          events:{
          	 init: (o) => {
              console.log(o.getCenter())
              //console.log(this.$refs.map.$$getInstance());
              Bus.$emit("init",o);
              
              
              o.getCity(result => {
                console.log(result)
              })
        	 /*o.setCity("武汉",result => {
                console.log(result)
              })*/
            },
         	"dragend":function(e){
				//console.log("dragging",e,this.getCenter());
         		Bus.$emit(e.type,this);
         		
         	}
          },
          makerConf: {
            position: [121.5273285, 31.21315058],
            content:""
          },
		 searchOption: {
            city: '武汉',
            citylimit: true
         },
         plugin:[
         	'ToolBar',
         	'Scale'
         ]
        };
      },
      created(){
      	var me = this;
      
      	Bus.$on("dragend",function(o){
      		var point = o.getCenter();
      		var pos = [point.O,point.P]; 
      		me.makerConf.position = [point.O,point.P];
      	});
      	Bus.$on("init",function(o){
      		var point = o.getCenter();
      		o.getCity(result => {
                console.log(result);
              }); 
            console.log(point)  
            //me.makerConf.position = [point.O,point.P];  
      	});
      },
      mounted(){
      	
      },
      methods: {
      	//this.$refs.map.$$getCenter()
  
       onSearchResult(pois) {
       	   
          let latSum = 0;
          let lngSum = 0;
          var me = this;
         
          var mymap = me.$refs.map.$$getInstance();
         	
          if (pois && pois.length > 0) {
          	 console.log(pois)
            //如果长度为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;
               
	        }  
       },
        $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 || [116.396574, 39.992706]; //已知点坐标
	            geocoder.getAddress(lnglatXY, function(status, result) {
		            if (status === 'complete' && result.info === 'OK') {
		                options.success && options.success(result);
		            }else{
		            	options.error && options.error(status,result);
		            }
    			}); 
				});
      	 		
      	 	}
      	 	
      	 }
       }
    };
    
    /*
      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