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 相关文章推荐
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
js实现双人五子棋小游戏
May 28 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
php Smarty 字符比较代码
2011/02/27 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
详解Python文本操作相关模块
2017/06/22 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Pycharm Git 设置方法
2020/09/15 Python
医学毕业生自荐信
2013/10/11 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
销售辞职报告范文
2014/01/12 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
英文请假条
2014/04/11 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
好员工观后感
2015/06/17 职场文书
警示教育片观后感
2015/06/17 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis