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 相关文章推荐
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
vue实现放大镜效果
Sep 17 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
github配置使用指南
2014/11/18 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python中super关键字用法实例分析
2015/05/28 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python向excel中写入数据的方法
2019/05/05 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
jupyter notebook 重装教程
2020/04/16 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers