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实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JavaScript生成随机验证码代码实例
Sep 28 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php错误级别的设置方法
2013/06/17 PHP
php cli换行示例
2014/04/22 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
完美的php分页类
2017/10/24 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
phpStorm2020 注册码
2020/09/17 PHP
js 居中漂浮广告
2010/03/21 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
js中有关IE版本检测
2012/01/04 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python正则表达式指南 推荐
2018/10/09 Python
Django models filter筛选条件详解
2020/03/16 Python
Python Selenium库的基本使用教程
2021/01/04 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
应聘教师推荐信
2013/10/31 职场文书
医院义诊活动总结
2014/07/04 职场文书
课内比教学心得体会
2014/09/09 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
文明礼貌主题班会
2015/08/14 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android