高德地图 key 和 安全密钥 的使用
发布于2022-08-03 00:35 阅读(636) 评论(0) 点赞(25) 收藏(3)
首先将常量提出到静态配置文件中，方便后期修改时无需重新打包。
1. 在html文件的同级目录新建一个static文件夹，再在里面新建一个config.js文件；
2. 高德地图在2021.12月以后新申请的key必须要搭配安全密钥一起使用；
注意：这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。所以安全密钥在入口的 html 文件中引入，页面中正常使用key值即可。
<script type="text/javascript">
// 高德地图秘钥，必须在加载load.js文件之前
window._AMapSecurityConfig = {
securityJsCode: '您申请的安全密钥'
}
</script>
开发环境使用（本地秘钥）：
config.js：
- var gloableConfig = {
- "key": "请填写自己申请的高德地图key值", // 高德地图的key（配合秘钥使用的key）开发环境使用
- "secretKey": "请填写自己申请的高德地图秘钥值", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
- };
index.html：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <link rel="icon" href="<%= BASE_URL %>logo.png">
- <title>系统名称</title>
- <script src="./static/config.js"></script>
- <script type="text/javascript">
- // 高德地图秘钥，必须在加载JSAPI load.js文件之前
- window._AMapSecurityConfig = {
- securityJsCode: gloableConfig.secretKey // 开发环境使用
- }
- </script>
- </head>
- <body>
- <div id="app"></div>
- </body>
- </html>
正式环境使用（Nginx配置）：
config.js：
- const $gloableConfig = {
- "key": "请填写自己申请的高德地图key值", // 高德地图的key（配合Nginx使用的key）正式环境使用
- "serviceHost": '请填写自己配置的服务器地址 https://***********/_AMapService/v4/maps' // 高德地图秘钥的服务器地址（Nginx配置）正式环境使用
- };
index.html：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <link rel="icon" href="<%= BASE_URL %>logo.png">
- <title>系统名称</title>
- <script src="./static/config.js"></script>
- <script type="text/javascript">
- // 高德地图秘钥，必须在加载JSAPI load.js文件之前
- window._AMapSecurityConfig = {
- serviceHost: gloableConfig.serviceHost // 正式环境使用
- }
- </script>
- </head>
- <body>
- <div id="app"></div>
- </body>
- </html>
在页面中使用静态配置变量：
let key = $gloableConfig.key; // 从静态变量中获取常量值key原文链接:https://blog.csdn.net/keke11211/article/details/124683754
所属网站分类: 技术文章 > 博客
作者：爱出汗
链接：http://www.qianduanheidong.com/blog/article/380768/cb4cede32c450775e6c9/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力