SpringBoot+Vue+百度地图实现定位打卡功能：

1、打卡sign表sql：

CREATE TABLE `sign` (`id` int(11) NOT NULL AUTO_INCREMENT,`user` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名称',`location` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '打卡位置',`time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '打卡时间',`comment` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2、获取百度开放平台AK：

https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5=》右上角控制台

3、定位=》获取当前位置：

【1】public=》index.html

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK"></script>

【2】获取时间较长=》建议放在login.vue页面

mounted() {// 获取地理位置var geolocation = new BMapGL.Geolocation();geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {const province = r.address.province;const city = r.address.city;localStorage.setItem("location", province + city);}});
},

4、后台打卡逻辑：

hutool官网：https://www.hutool.cn/docs/#/core/%E6%97%A5%E6%9C%9F%E6%97%B6%E9%97%B4/%E6%97%A5%E6%9C%9F%E6%97%B6%E9%97%B4%E5%B7%A5%E5%85%B7-DateUtil

 // 新增或者更新
@PostMapping("/addOrUpdate")
public Result save(@RequestBody Sign sign) {if (sign.getId() == null) {  // 新增打卡String today = DateUtil.today();      //DateUtil是hutool工具类的QueryWrapper<Sign> queryWrapper = new QueryWrapper<>();queryWrapper.eq("user", sign.getUser());queryWrapper.eq("time", today);Sign one = signService.getOne(queryWrapper);if (one != null) {  // 打过卡了return Result.error("-1", "您已打过卡");}sign.setTime(today);}signService.saveOrUpdate(sign);//saveOrUpdate是mybits-plus工具类的return Result.success();
}

5、前端打卡功能：

<template><div class="main"><div class="sign" @click="handleSign">打卡</div></div>
</template><script>
export default {name: "BaiDuSign",data() {return {};},created() {},methods: {handleSign() {let userInfo = JSON.parse(localStorage.getItem("user"));let param = {location: localStorage.getItem("location"),user: userInfo.username,};this.request.post("/sign/addOrUpdate", param).then((res) => {if (res.success) {this.$message.success("打卡成功");} else {this.$message.error(res.msg);}});},},
};
</script><style  lang="less" scoped >
.main {.sign {width: 200px;height: 200px;border-radius: 50%;background: #1890ff;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 30px;cursor: pointer;box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}
}
</style>

6、效果：

SpringBoot+Vue+百度地图实现定位打卡功能：相关推荐

Springboot集成百度地图实现定位打卡功能
【Springboot】集成百度地图实现定位打卡功能
目录第一章需求分析第二章概要设计第三章详细设计 3.1 环境搭建 3.1.1 获取百度地图ak 3.1.2 创建springboot项目 3.2 配置application.propert ...
springboot使用百度地图IP定位API进行定位
springboot使用百度地图IP定位API进行定位一.申请开发者密钥(AK) 二.在springboot中调用百度地图的API 1.新建一个接口类 2.在controller层调用此接口对返回 ...
vue 百度地图 + 定位
vue 百度地图 + 定位 > 前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中 ...
android百度地图sdk定位权限,Android:使用百度地图SDK实现定位：下载SDK、申请密钥、动态获得Android权限...
最近想实现一个打卡的功能,想到可以利用百度地图的SDK.网上有很多关于百度地图SDK定位.地图功能应用的demo,这部分倒不是很困难.但网上很多博客写的内容一般都着重于代码部分,很多下载配置和编译器设 ...
利用百度地图Android定位SDK获取经纬度
环境的搭建(参考上一次的文章) 百度地图Android定位SDK的使用 2．在Android studio里设计程序来获取经纬度界面布局activity_main.xml文件的源代码: <?x ...
android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
android百度地图更换定位图标,android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）...
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...
在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）
使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...