0


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

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

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

  1. 高德地图在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
标签: vue.js

本文转载自: https://blog.csdn.net/keke11211/article/details/124683754
版权归原作者 努力学习~冲鸭 所有, 如有侵权,请联系我们删除。

“高德地图 key 和 安全密钥 的使用”的评论:

还没有评论