SpringBoot和Vue集成高德地图

前言

主要内容包括：高德开放平台的使用及一些常用功能的使用

一、高德开放平台的使用

1️⃣：我们使用高德开放平台|高德地图API进行项目的功能集成，首先登录

2️⃣：登陆完之后选择控制台，然后这里需要认证一下，填入自己的个人相关信息即可

3️⃣：认证方式选择“个人认证开发者”即可，然后完善信息

4️⃣：当我们认证成功之后，再次进入控制台，创建关于地图的应用

5️⃣：然后点击编辑，为此应用添加key，选择web端（JS API）

二、功能的实现

1. 在views下新建MapView.vue，用于创建我们的地图页面

2. 然后在public下面的index.html中引入高德地图的资源文件，需要注意其中的key，读者要改为自己刚才申请的key和安全密钥

3. 我这里JSAPI key和安全密钥的使用的第二种方法

方式一【强烈建议】

1）JSAPI key搭配代理服务器并携带安全密钥转发（安全）

引入地图 JSAPI 脚本之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。（注意您这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

<script type="text/javascript"></