thymeleaf HTML springBoot vue 集成高德地图

最新推荐文章于 2025-04-30 12:16:06 发布

雄鸡三声天下白

最新推荐文章于 2025-04-30 12:16:06 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html spring boot

本文链接：https://blog.youkuaiyun.com/i_am_bad_man/article/details/127353423

本文介绍如何在springBoot项目中集成高德地图API。通过使用thymeleaf、vue及HTML，详细展示了从申请高德地图Key到在项目中实现地图显示的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

thymeleaf HTML springBoot vue 集成高德地图

写在前面
使用的插件和技术

 springBoot  + thymeleaf + vue + html

申请高德key

网站地址 https://lbs.amap.com/

在这里插入图片描述单击控制台

打开控制台

在这里插入图片描述
根据要求写入，然后申请key,就可以得到key.
根据高德的步骤很简单，这里就不再描述了

集成到项目

创建一个HTML页面

head 增加以下代码

<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>

引入js 填入申请的key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key='申请的key'"></script>

设置要显示的div 可以根据自己的情况设置高和宽

<div id="container" style="width:100%;height:calc(100vh - 6rem);" ></div>

vue 初始化

var appMapIndex = new Vue({
'el':'#container'
})

在 mounted 函数中初始化地图

  mounted(){
     var map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom:11, //初始化地图层级
            center: [116.397428, 39.90923] //初始化地图中心点
        });
    }

完整代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>
<body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=‘申请的key’"></script>
<div class="containerBody">
    <div id="container" style="width:100%;height:calc(100vh - 6rem);" ></div>
</div>
<script>


   var appMapIndex = new Vue({
    'el':'#container',
    mounted(){
     var map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom:11, //初始化地图层级
            center: [116.397428, 39.90923] //初始化地图中心点
        });
    }

  })
</script>
</body>
</html>