开发 地图 JS API 2.0 进阶教程 基础 JS API 安全密钥使用

JS API 安全密钥使用 最后更新时间: 2023年03月28日

本文主要介绍 JS API 安全密钥的使用。

提示

您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

安全密钥使用

通过代理服务器转发

提示

JS API  安全密钥通过代理服务器转发,强烈建议使用(安全)

以 Nginx 反向代理为例,参考以下三个 location配置,进行反向代理设置,分别对应自定义地图、海外地图、Web 服务,其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。如果您使用了多个key,需要在代理设置中根据 key来映射不同的安全密钥。

server {
  listen       80;             #nginx端口设置,可按实际端口修改
  server_name  127.0.0.1;      #nginx server_name 对应进行配置,可按实际添加或修改

  # 自定义地图服务代理
  location /_AMapService/v4/map/styles {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://webapi.amap.com/v4/map/styles;
  }
  # 海外地图服务代理
  location /_AMapService/v3/vectormap {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://fmap01.amap.com/v3/vectormap;
  }
  # Web服务API 代理
  location /_AMapService/ {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://restapi.amap.com/;
  }
}
注意:

JS API 使用 script 标签同步加载增加代理服务器设置脚本,设置代理服务器域名或地址,将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址,其中_AMapService为代理请求固定前缀,不可省略或修改。(注意您这 个设置必须是在JS API 脚本加载之前进行设置,否则设置无效。)

保存相关配置之后需要通过命令nginx -s reload  命令重新加载 nginx 配置文件。

JS API 脚本同步加载为例:

<div id='container' ></div>
<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=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
  // 地图初始化应该在地图容器div已经添加到DOM树之后
  var map = new AMap.Map('container', {
    zoom:12
  })
</script>

通过明文方式设置

提示

JS API 安全密钥以明文方式设置,不建议在生产环境使用(不安全)

注意:

JS API 使用 script 标签同步加载增加代理服务器设置脚本,并将「您申请的安全密钥」替换为您的安全密钥;(注意您这个设置必须是在JS API 脚本加载之前进行设置,否则设置无效。)

JS API 脚本同步加载为例:

<div id='container' ></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
  // 地图初始化应该在地图容器div已经添加到DOM树之后
  var map = new AMap.Map('container', {
    zoom:12
  })
</script>

示例
中心
常见
问题
智能
客服