Springboot集成百度地图实现定位打卡功能
📢📢📢📣📣📣 哈喽!大家好,我是一位上进心十足,拥有极强学习力的在校大学生😜😜😜 我所写的博客的领域是面向后端技术的学习,未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识,会更新实战项目,以及开发应用! ❤️❤️❤️ 感谢各位大可爱小可爱! ❤️❤️❤️
二、申请自己的API
百度开放平台官网:
获取API
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=bmvg8yeOopwOB4aHl5uvx52rgIa3VrPO"></script>
放入到我们的前端
三、写Java后台
1.新建一个Java类
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
@Data
@TableName("sign")
public class Sign {
@TableId(type = IdType.AUTO)
private Integer id;
private String user;
private String location;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private String time;
private String comment;
}
2.设置我们Controller
完整代码:
四、前端使用接口
在需要使用的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)
}
});
},
