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 相关文章推荐
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
JavaScript 定时器详情
Nov 11 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
Python学习资料
2007/02/08 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
自我鉴定怎么写
2014/01/12 职场文书
合伙经营协议书
2014/04/18 职场文书
学校节能减排倡议书
2014/05/16 职场文书
安全宣传标语口号
2014/06/06 职场文书
学生评语集锦
2015/01/04 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2015年物流客服工作总结
2015/07/27 职场文书