diy小程序开发平台_vue基于Vue2.0和高德地图的地图组件实例

  • 栏目:行业动态 时间:2021-01-12 11:45 分享新闻到:
<返回列表

vue基于Vue2.0和高德地图的地图组件实例       本篇文章主要介绍了vue基于Vue2.0和高德地图的地图组件实例,非常具有实用价值,需要的朋友可以参考下

前言

在做基于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.]
 }, {
 position: [121.5273286, 31.]
 /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.]
 }, {
 position: [121.5273286, 31.]
 // 模拟实时更新位置
 // 开启一个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:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

diy小程序开发平台_vue基于Vue2.0和高德地图

行业动态 2021-01-12
vue根据Vue2.0和高德地形图的地形图部件案例 序言在做根据LBS的运用中,经常会和地形图...
查看全文

广州凡科互联网科技股份有限公司招聘人

行业动态 2021-01-12
招聘人数:1职位信息1、负责行政的客人来访迎送等招待工作;2、负责办公用品、固定资产及车...
查看全文

广州凡科互联网科技股份有限公司招聘京

行业动态 2021-01-12
招聘人数:9职位信息1、负责京东平台的日常推广工作,制定合理的运营方案;2、店铺的产品...
查看全文
返回全部新闻


区域站点: 南丰县如何注册微信小程序   南宫市小程序源码下载   囊谦县做一个小程序多少钱   南和县小程序游戏   南华县如何注册微信小程序   南江县小程序源码下载   南京市做一个小程序多少钱   南靖县小程序游戏   南康市如何注册微信小程序   南乐县小程序源码下载   南陵县做一个小程序多少钱   南宁市小程序游戏   南平市如何注册微信小程序   南皮县小程序源码下载   南市区做一个小程序多少钱   南通市小程序游戏   南投县如何注册微信小程序   南雄市小程序源码下载   南溪县做一个小程序多少钱   南阳市小程序游戏   南漳县如何注册微信小程序   南召县小程序源码下载   南郑县做一个小程序多少钱   那坡县小程序游戏   那曲县如何注册微信小程序   纳雍县小程序源码下载   讷河市做一个小程序多少钱   内黄县小程序游戏   内江市如何注册微信小程序   内丘县小程序源码下载   内乡县做一个小程序多少钱   嫩江市小程序游戏   聂荣县如何注册微信小程序   尼玛县小程序源码下载   尼木县做一个小程序多少钱   宁安市小程序游戏   宁波市如何注册微信小程序   宁城县小程序源码下载   宁德市做一个小程序多少钱   宁都县小程序游戏   宁国市如何注册微信小程序   宁海县小程序源码下载   宁化县做一个小程序多少钱   宁晋县小程序游戏   宁陵县如何注册微信小程序   宁明县小程序源码下载   宁南县做一个小程序多少钱   宁强县小程序游戏   宁陕县如何注册微信小程序   宁武县小程序源码下载   宁乡市做一个小程序多少钱   宁阳县小程序游戏   宁远县如何注册微信小程序   农安县小程序源码下载   磐安县做一个小程序多少钱   盘锦市小程序游戏   盘山县如何注册微信小程序   磐石市小程序源码下载   盘州市做一个小程序多少钱   蓬安县小程序游戏   澎湖县如何注册微信小程序   蓬莱市小程序源码下载   彭山县做一个小程序多少钱   蓬溪县小程序游戏   彭阳县如何注册微信小程序   彭泽县小程序源码下载   彭州市做一个小程序多少钱   偏关县小程序游戏   平安县如何注册微信小程序   平昌县小程序源码下载   平定县做一个小程序多少钱   屏东县小程序游戏   平度市如何注册微信小程序   平果县小程序源码下载   平和县做一个小程序多少钱   平湖市小程序游戏   平江县如何注册微信小程序   平乐县小程序源码下载   平凉市做一个小程序多少钱   平利县小程序游戏   平罗县如何注册微信小程序   平陆县小程序源码下载   屏南县做一个小程序多少钱   平泉市小程序游戏   屏山县如何注册微信小程序   平顺县小程序源码下载   平塘县做一个小程序多少钱   平潭县小程序游戏   平武县如何注册微信小程序   萍乡市小程序源码下载   平乡县做一个小程序多少钱   平阳县小程序游戏   平遥县如何注册微信小程序   平阴县小程序源码下载   平邑县做一个小程序多少钱   平远县小程序游戏   平舆县如何注册微信小程序   皮山县小程序源码下载   普安县做一个小程序多少钱   浦北县小程序游戏   浦城县如何注册微信小程序   普洱市小程序源码下载   普格县做一个小程序多少钱   浦江县小程序游戏   普兰县如何注册微信小程序   普宁市小程序源码下载   莆田市做一个小程序多少钱   迁安市小程序游戏   乾安县如何注册微信小程序   潜江市小程序源码下载   潜山市做一个小程序多少钱  

友情链接: 个人怎么做微信小 微信小程序 免费 小程序要多少钱能 开发一个小程序多 手机版

Copyright © 2002-2020 做一个小程序多少钱_小程序游戏_如何注册微信小程序_小程序源码下载_小程序原型设计工具 版权所有 (网站地图) 备案号:粤ICP备10235580号