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();

效果图

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

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

时间: 2019-09-06

vue调用高德地图实例代码

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

Vue组件之高德地图地址选择功能的实例代码

注:本文基于上一篇文章[Vue-Cli 3.0 中配置高德地图 ] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件 三. 组件实现具体代码 <template> <div cla

vue使用高德地图根据坐标定位点的实现代码

前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma

vue+高德地图写地图选址组件的方法

前言 现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受:第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个把这个功能优化一下,也方便以后使用. 开整 vue的安装使用啥的我在这就不说了,直接开始地图选址组件. 首先上高德开放平台弄一个key,然后在index.ht

Vue-Cli 3.0 中配置高德地图的两种方式

vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对.我所遇到的问题: 1. 安装之后使用,始终提示跨域问题. 2. 页面刷新之后地图出不来,第一次进入页面时没问题.因为这两个问题所以放弃了这个组件的使用.我想可能是我哪个地方代码有问题. 二.直接引用高德地图 SDK 因为第一种方式尝试失败了,所以我选择

vue异步加载高德地图的实现

本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt

vue基于Vue2.0和高德地图的地图组件实例

前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点

在vue项目中引入高德地图及其UI组件的方法

引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

详解vue项目中调用百度地图API使用方法

步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

在vue项目中引入highcharts图表的方法(详解)

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

vue项目中引入noVNC远程桌面的方法

1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

在Vue项目中引入腾讯验证码服务的教程

什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

vue项目中使用百度地图的方法

1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

vue项目中引入vue-datepicker插件的详解

项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选. 传统的input type='date无法做到,所以使用了这个插件来实现功能. 1.引入vue-datepicker loader:npm install vue-datepicker 2.引入moment loader:npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment: 3.在用到该插件的地方引入: import myDatepic

vue项目中引入Sass实例方法

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

在vue项目中引入vue-beauty操作方法

vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty. 1.vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue init webpack my-projec:初始化cd my-project:进入目录npm install:安装依赖 2.安装vue-beauty 3.查看配置文件package.json,是否有vue-beauty组件的版本号 4.在main.js中引入