接上之前的项目
Vue+高德地图API的使用
Vue+高德地图API的使用(插件的使用)

1.页面布局

绘制页面

<div class="Clock"><!-- 自定义打卡地点 --><el-input id="handleSelect" v-model="ClockAdd" placeholder="请输入地点经纬度设置打卡地" style="margin-top: 50px;"></el-input><el-button type="primary" @click="ClockAddCli">设置打卡地点</el-button><!-- 自定义当前位置  方便演示增加可设置位置 --><el-input id="handleSelect" v-model="NowAdd" placeholder="可设置当前位置" style="margin-top: 10px;"></el-input><el-button type="primary" @click="isClockAdd">打卡</el-button>
</div>

data中添加数据

ClockAdd: null, //圆形地点
NowAdd: null, //当前位置
circle: null, //圆形存放
ClockLngLat: [116.397205, 39.917568], //圆形中心点经纬度

初始化打卡地点

drawCircle() {AMapLoader.load({key: "填写key", // 申请好的Web端开发者Key，首次调用 load 时必填//2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBarversion: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15resizeEnable: true,plugins: ["AMap.Geolocation", //定位"AMap.Circle", //圆形"AMap.Marker", //标记点"AMap.GeometryUtil", //通用的函数库], // 需要使用的的插件列表 }).then((AMap) => {//判断地图是否有圆形if (this.circle) {//清除地图所有圆形跟标记点this.map.remove(this.circle);this.map.remove(this.marker);}//绘制圆形this.circle = new AMap.Circle({center: this.ClockLngLat, // 圆心位置radius: 500, // 圆半径 米fillColor: 'rgba(103,182,255,.5)', //圆形填充颜色strokeColor: '#5898ff', //描边颜色strokeWeight: 2, // 描边宽度});//地图添加圆形this.map.add(this.circle);//getCenter 获取圆形中心点var MakCenter = this.circle.getCenter()//圆形中心点添加标记点this.marker = new AMap.Marker({map: this.map, //要显示该marker的地图对象position: MakCenter, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]topWhenClick: true, //鼠标点击时marker是否置顶，默认false });this.map.add(this.marker); //添加  点标记})
},

我是接之前项目写的
load 中的参数可不写
只要在initMap中配置plugins插件执行drawCircle事件即可

2.设置打卡地点事件

ClockAddCli() {//输入框必须有值if (this.ClockAdd === null) {this.$message({message: '地址不能为空',type: 'warning'});return}//处理数据 同时将字符串转为Number类型var aaa = this.ClockAdd.split(',')for (let i = 0; i < aaa.length; i++) {aaa[i] = Number(aaa[i])}//处理成功后的数据 数组且值为Number类型 [116.397, 39.917]this.ClockLngLat = aaa//drawCircle 绘制圆形this.drawCircle()
},

3.打卡事件

isClockAdd() {AMapLoader.load({}).then((AMap) => {//进行圆形区域判定//定位 var geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认：truetimeout: 10000, // 设置定位超时时间，默认：无穷大})var p = [] //当前位置geolocation.getCurrentPosition((status, result) => {if (status == 'complete') {p.push(result.position.lng)p.push(result.position.lat)} else {console.log(result);}//判断是否设置了 当前位置 不需要可删除**if (this.NowAdd) {var aaa = this.NowAdd.split(',')for (let i = 0; i < aaa.length; i++) {aaa[i] = Number(aaa[i])}p = aaa}//当前位置设置标记点  方便查看this.marker1 = new AMap.Marker({map: this.map, //要显示该marker的地图对象position: p, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]topWhenClick: true, //鼠标点击时marker是否置顶，默认false });// contains 判断 p 是否在 this.circle圆形 里面var isPoint = this.circle.contains(p);// getCenter 获取 this.circle圆形 中心点var circleCen = this.circle.getCenter()if (isPoint) {this.$message({message: '打卡成功',type: 'success'});} else {//AMap.GeometryUtil.distance 计算两点之间的距离   减去  圆形半径 500米var distance = Math.round(AMap.GeometryUtil.distance(p, circleCen)) - 500this.$message({message: '打卡失败,您距离打卡地点还有' + distance + '米',type: 'error'});}});}).catch(e => {console.log(e);})
},

效果：

更改打卡地

打卡成功

打卡失败

Vue+高德地图API的使用(定位打卡)相关推荐

Android使用高德地图api实现基础定位
Android使用高德地图api实现基础定位(一) 关于会获取SHA1的可自行跳过这一步第二步引用高德sdk 第三步修改MainActivity.java 关于这篇主要讲如何使用高德sdk(不是 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
android开发之高德地图API篇：1、高德地图API之实时定位+轨迹可视化
TIME:2020年7月6日高德地图API之实时定位+轨迹可视化前言: step1.工程的配置 step2.显示地图 step2.实现静态定位: step3.实时定位 step4.实现轨迹可视化: ...
高德地图API之IP定位
高德地图API之IP定位(替换你的KEY) IP定位API:http://lbs.amap.com/api/webservice/guide/api/ipconfig package com.gdma ...
关于在vue2.X中使用高德地图api获取用户定位
最近开发的MOA考试端需要获取到当前考试用户的定位,公司没有自己的定位组件,所以需要接入高德地图api 废话不多说,直接上操作步骤. 1.首先上高德地图API的官网,高德地图API官网, 跟着以上的步 ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
目录一.前言: 二.正文: 1.注册高德地图开发者.创建应用 2.借助官方的示例开发 3.对官方的开发示例进行修改 4.获取详细位置信息 5.详细代码三.结尾:小周接触编程时间不长,刚起步,有更好 ...

Vue+高德地图API的使用(定位打卡)

1.页面布局

2.设置打卡地点事件

3.打卡事件

效果：

Vue+高德地图API的使用(定位打卡)相关推荐

最新文章

热门文章

Vue+高德地图API的使用(定位打卡)

1.页面布局

2.设置打卡地点 事件

3.打卡 事件

效果：

Vue+高德地图API的使用(定位打卡)相关推荐

最新文章

热门文章

2.设置打卡地点事件

3.打卡事件