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)
      }
    });
  },

五、结果展示

六、后台管理

⛵小结

经验分享 程序员 微信小程序 职场和发展