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


Posted in Javascript onApril 28, 2017

前言

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

那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点的栗子讲起。

产品经理说,咱们要搞个地图,上面给我放N个人,我要时刻知道他们的位置。

安装

npm install vue-amap --save

引入vue-amap

vue-amap的引入方式很简单,在入口文件中加入下面内容

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
 // 申请的高德key
 key: 'YOUR_KEY',
 // 插件集合
 plugin: ['']
});

显示地图

在模版中加入vue-amap的地图组件

<el-amap vid="amapDemo">
</el-amap>

给地图加入N个人

在模版中加入vue-amap的地图组件

<template>
 <el-amap vid="amapDemo">
  // 添加N个人
  <el-amap-marker v-for="marker in markers" :position="marker.position">
  </el-amap-marker>
</el-amap>
</template>

<script>
export default {
 data() {
  return {
   markers: []
  };
 },
 mounted() {
  // 姑且N为2
  // 这样地图上就添加了两个人
  this.markers = [
   {
   position: [121.5273285, 31.21515044]
   }, {
   position: [121.5273286, 31.21515045]
   }
  ];
 }
};
</script>

让N个人动起来

之前我们已经将N个人放上去了,关键的时候来了,我们如何更新地图状态呢?vue-amap支持数据的单向绑定,直接更新本地数据状态即可同步地图显示状态。

<template>
 <el-amap vid="amapDemo">
  <el-amap-marker v-for="marker in markers" :position="marker.position">
  </el-amap-marker>
</el-amap>
</template>

<script>
export default {
 data() {
  return {
   markers: []
  };
 },
 mounted() {
  // 姑且N为2
  // 为地图添加两个人
  this.markers = [
   {
   position: [121.5273285, 31.21515044]
   }, {
   position: [121.5273286, 31.21515045]
   }
  ];

  // 模拟实时更新位置
  // 开启一个1s的轮训,每个人的经纬度都自增0.00001
  const step = 0.00001;
  setInterval(() => {
   this.markers.forEach((marker) => {
    marker.position = [marker.position[0] + step, marker.position[1] + step];
   });
  }, 1000);
 }
};
</script>

一个简单的基于vue-amap的地图应用就完成了,有没有觉得方便很多,我们只要维护好自己本地的数据状态即可,将具体地图的API,以及本地数据集和地图状态同步问题交给vue-amap负责就好了。

我们会持续维护这个项目,同时也希望vue-amap能给更多开发者带来开发效率的提高以及体验上的舒适。

Github:vue-amap

demo完成下载地址:vue-amap_3water.rar

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

Javascript 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
老生常谈js中的MVC
Jul 25 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
d3.js实现立体柱图的方法详解
Apr 28 #Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 #Javascript
vue调用高德地图实例代码
Apr 28 #Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 #Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 #Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 #Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 #Javascript
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python flask中动态URL规则详解
2019/11/22 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
成人教育自我鉴定
2013/11/01 职场文书
工地宣传标语
2014/06/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年民政工作总结
2014/11/26 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript