高德地图 key 和安全密钥的使用

最新推荐文章于 2025-03-09 17:15:32 发布

努力学习~冲鸭

最新推荐文章于 2025-03-09 17:15:32 发布

阅读量2.4w

点赞数 9

分类专栏：高德地图文章标签： vue.js

本文链接：https://blog.csdn.net/keke11211/article/details/124683754

版权

高德地图专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在开发和正式环境中分别配置高德地图的秘钥和安全密钥，强调了配置需在JSAPI加载前完成，并提供了HTML和config.js的示例代码。在开发环境使用本地秘钥，而在正式环境则通过Nginx配置服务器地址来使用秘钥。

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

首先将常量提出到静态配置文件中，方便后期修改时无需重新打包。

1. 在html文件的同级目录新建一个static文件夹，再在里面新建一个config.js文件；

2. 高德地图在2021.12月以后新申请的key必须要搭配安全密钥一起使用；

注意：这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。所以安全密钥在入口的 html 文件中引入，页面中正常使用key值即可。

// 高德地图秘钥，必须在加载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

高德地图 key 和 安全密钥 的使用

高德地图 key 和安全密钥的使用