基于百度地图实现定位服务

最新推荐文章于 2024-05-15 19:50:40 发布

简单点了

最新推荐文章于 2024-05-15 19:50:40 发布

阅读量305

点赞数

分类专栏： SpringBoot 文章标签： spring boot

本文链接：https://blog.csdn.net/weixin_41957626/article/details/131385945

版权

SpringBoot 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

基于百度地图实现定位服务

可以基于百度地图实现位置打卡等的常见业务操作

1.注册为开发者

1.找到首页

百度地图开放平台 | 百度地图API SDK | 地图开发

2.点击控制台

3.创建自己的应用

4.下面的测试仅仅是测试环境

5.创建完成

2.编写服务器端代码

1.目录

2.conifg下

@Configuration
public class OkHttpConfig {
    @Bean
    public RestTemplate restTemplate() {
        return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }
}

3.controller下

@RestController
public class GetController {
    @Resource
    private RestTemplate restTemplate;
    @Value("${ak}")
    private String ak;
 
    @GetMapping("/get")
    public Object getAddrByUserIP(HttpServletRequest request) throws URISyntaxException {
        String url = "https://api.map.baidu.com/location/ip?ak="+ak+"&coor=bd09ll";
        //发送请求
        ResponseEntity<Map> forEntity = restTemplate.getForEntity(new URI(url), Map.class);
        Map result = forEntity.getBody();
        return result;
    }
}

4.application.properties

ak=xxxxx #自己上面注册的

5.启动测试

3.编写前端代码

<html>
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div align="center">
    <button id="button" onclick="get()">定位</button>
    <div id="address" style="border-style:solid;width:100px;height:30px"></div>
</div>
<script>
    function get() {
        var data =  $.parseJSON($.ajax({
            url: "get",//请求方式
            dataType: "json", //返回json
            async: false
        }).responseText);
        //获取位置
        var address = eval(data).content.address;
       
        let it = document.getElementById('address');
        it.innerHTML = address;
    }
</script>
</body>
</html>