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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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
wordpress之wp-settings.php
2007/08/17 PHP
php缓冲输出实例分析
2015/01/05 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
日期 时间js控件
2009/05/07 Javascript
Javascript Math对象
2009/08/13 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jQuery动态添加
2016/04/07 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
在django中使用自定义标签实现分页功能
2017/07/04 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python 表格打印代码实例解析
2019/10/12 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
UNIX特点都有哪些
2016/04/05 面试题
代理班主任的自我评价
2014/02/04 职场文书
教师求职信范文
2014/05/24 职场文书
2014高考励志标语
2014/06/05 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
建党伟业观后感
2015/06/01 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis