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