欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 使用高德地图vue-amap组件过程解析

程序员文章站 2022-06-14 09:03:06
这篇文章主要介绍了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();

效果图

vue 使用高德地图vue-amap组件过程解析

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