如何在 springboot 中使用百度地图

最新推荐文章于 2024-01-17 21:30:40 发布

无敌上上仙

最新推荐文章于 2024-01-17 21:30:40 发布

阅读量2.5k

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_51530263/article/details/125179392

版权

首先百度搜索百度地图api，点击进入百度地图开放品台

进入开放平台后，鼠标放在开发文档上然后点击进入web开发下的JavaScript Api

在里我们要使用百度地图api的话要首先要进入控制台登陆注册，如果没有就先注册（这里账号注册就不演示了）

进去之后找到左侧导航栏的应用管理，点击我的应用点击创建应用（注意：在这里刚注册登陆进来是什么都没有的，我的是因为已经创建过了）

进入之后注意，应用类型要选择浏览器端，名称自定义即可，（我的叫js，你也可以这么叫，容易区分）下方Referer白名单填 * 号即可其余不需要修改（除非阁下有自己的想法）。

然后在我的应用页面就会得到这么一个东西，我们接下来要是用的就是这里面有一叫ak的码

然后新建一个springboot工程将下面这段代码搞到你的boot当中，仔细看里面有一个script标签中让填写你的ak，就是上面刚创建出来的那个ak码（是前端哈朋友们，搞到html文件里，ctrl+a ctrl+c 进去原来的代码一点别留，一定要相信我，这段代码实际上就在开发文档的javascript api 开发指南-->Hello World中）

<!DOCTYPE html> 
<html>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 
</style> 
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>
</head> 
  
<body> 
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标 
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别 
</script> 
</body> 
</html>

然后启动你的springboot访问你的这个HTML页面就可以看见你的地图了

因为每个人开发环境不同，所以有问题欢迎大家一起探讨