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


Posted in Javascript onSeptember 07, 2019

这篇文章主要介绍了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组件过程解析

https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

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

Javascript 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JS根据生日算年龄的方法
May 05 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
Angular2入门--架构总览
Mar 29 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
vue的滚动条插件实现代码
Sep 07 #Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 #Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 #Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 #Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 #Javascript
You might like
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
js实现简单的秒表
2020/01/16 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python删除不需要的python文件方法
2018/04/24 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
教师自荐信
2013/12/10 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
信息管理专业自荐书
2014/06/05 职场文书
股东出资证明书范例
2014/10/04 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL