SpringBoot和Vue集成高德地图
前言
主要内容包括：高德开放平台的使用及一些常用功能的使用
一、高德开放平台的使用
1️⃣：我们使用高德开放平台|高德地图API进行项目的功能集成，首先登录
2️⃣：登陆完之后选择控制台，然后这里需要认证一下，填入自己的个人相关信息即可
3️⃣：认证方式选择“个人认证开发者”即可，然后完善信息
4️⃣：当我们认证成功之后，再次进入控制台，创建关于地图的应用
5️⃣：然后点击编辑，为此应用添加key，选择web端（JS API）
二、功能的实现
- 在views下新建MapView.vue，用于创建我们的地图页面
- 然后在public下面的index.html中引入高德地图的资源文件，需要注意其中的key，读者要改为自己刚才申请的key和安全密钥
- 我这里JSAPI key和安全密钥的使用的第二种方法
方式一【强烈建议】
1）JSAPI key搭配代理服务器并携带安全密钥转发（安全）
引入地图 JSAPI 脚本之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。（注意您这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）
<script type="text/javascript">window._AMapSecurityConfig = {serviceHost:'您的代理服务器域名或地址/_AMapService', // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
方式二【不建议】：
JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）：
引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您申请的安全密钥',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
三、具体实现
- MapView.vue页面：
返回主页 - 效果图：
- 更多功能请查看高德地图JS API:https://lbs.amap.com/api/javascript-api/reference/map/
四、常见问题
经纬度查询：https://lbs.qq.com/getPoint/
注意：
var marker = new AMap.Marker({ // marker 实例position: new AMap.LngLat(106.595219,29.421876),title: '重庆工程学院',})
其中：106.595219为经度，29.421876为纬度
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！