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表数据排序 sort table data
Feb 18 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
vue点击标签切换选中及互相排斥操作
Jul 17 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函数microtime()用法与说明
2013/12/04 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
用python实现的线程池实例代码
2018/01/06 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python类class参数self原理解析
2020/11/19 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
业务总经理岗位职责
2014/02/03 职场文书
《月迹》教学反思
2014/02/19 职场文书
会计工作决心书
2014/03/11 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
教育教学读书笔记
2015/07/02 职场文书
超市店长竞聘书
2015/09/15 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android