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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jquery实现图片切换代码
Oct 13 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
JS实现网页烟花动画效果
Mar 10 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实现MySQL更新记录的代码
2008/06/07 PHP
PHP 验证码的实现代码
2011/07/17 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
nodejs基础知识
2017/02/03 NodeJs
JQuery实现图片轮播效果
2017/05/08 jQuery
简单实现JavaScript弹幕效果
2020/08/27 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
pymysql模块使用简介与示例
2020/11/17 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
工程师岗位职责
2013/11/08 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
安全员岗位职责
2015/02/10 职场文书
大一学生个人总结
2015/02/15 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
雷锋观后感
2015/06/10 职场文书