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

高德地图在2021年12月02日申请以后的key需要配合安全密钥一起使用，不再提供老的单一key 申请。

如何获高德地图Key和安全密钥

1.在插件“高德地图”中点击“设置”在弹出窗口中点击“获取AK”或者“获取安全密钥”

也可以直接开https://lbs.amap.com/?ref=https://console.amap.com/dev/index获取高德地图控制台访问AK和安全密钥

申请后你将得到一个key 和安全秘钥

JSAPI key和安全秘钥的使用

方式一【强烈建议】：

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

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

<script type="text/javascript">
        window._AMapSecurityConfig = {
            serviceHost:'您的代理服务器域名或地址/_AMapService',  
            // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
        }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

2)代理服务器的设置

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

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/;
        }
}

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

方式二【不建议】：

JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）：

引入 JSAPI 使用 Loader 之前增加代理服务器设置脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意：您这个设置必须是在加载loader.js的脚本之前进行设置，否则设置无效。）

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'「您申请的安全密钥」',
        }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

常见问题

高德定位不准怎么办？

js api 地图定位偏差巨大，这个问题我在生产环境也遇到了，所以有点了解。

高德JS API提供的多种获取定位信息的方式，包括：

地图初始化加载定位到当前城市
浏览器定位
IP定位获取当前城市信息

一般我们都会用浏览器定位，但是这个其中其实是有坑的。

使用高德JS API提供了AMap.Geolocation插件来实现定位，使用方式如下：

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：无穷大
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量
    offset: [10, 20],
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: true,     
    //  定位按钮的排放位置,  RB表示右下
    position: 'RB'
  })

  geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
  });

  function onComplete (data) {
    // data是具体的定位信息
  }

  function onError (data) {
    // 定位出错
  }
})

高德文档

高德JS API提供的浏览器定位接口，融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。如果定位失败或者遇到其它问题，请参考这篇FAQ：Geolocation的定位流程以及定位失败的原因。

我遇到的是在360极速浏览器x和chrome 谷歌浏览器定位漂移，我允许浏览器定位的情况下，直接给我定到广州。

这其中我遇到2个坑。

第一个坑就是，我使用的是方式一，反向代理使用秘钥。这个坑其实是官方文档留给用户的。因为，在用户禁止浏览器定位的情况下，高德要通过用户ip 去定位，但是通过这个nginx 代理转发后，高德后端根本就拿不到用户ip，可能拿到的是代理服务器ip。

关于这个问题，我专门提工单和高德的技术沟通了，以下是沟通截图

我去，原来是少传一个参数，但是官网文档上也没有。

需要多加一个 ip 参数，百度了一下nginx 获取 ip,需要通过 $remote_addr 关键字获取。正确配置如下。

server {
        listen       80;             #nginx端口设置，可按实际端口修改
        server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
        
        # 自定义地图服务代理
        location /_AMapService/v4/map/styles {
            set $args "$args&jscode=您的安全密钥&ip=$remote_addr";
            proxy_pass https://webapi.amap.com/v4/map/styles;
        }
        # 海外地图服务代理
        location /_AMapService/v3/vectormap {
            set $args "$args&jscode=您的安全密钥&ip=$remote_addr";
            proxy_pass https://fmap01.amap.com/v3/vectormap;
        }
        # Web服务API 代理
        location /_AMapService/ {
            set $args "$args&jscode=您的安全密钥&ip=$remote_addr";
            proxy_pass https://restapi.amap.com/;
        }
}

第一个坑算是解决了。

第二个坑，360极速浏览器和谷歌浏览器允许浏览器定位给我定到香港……

也就是说，用户不给定位权限反而定位准，给了定位权限，反而不准，这个老六……

这个问题，其实高德在faq 里也说过了，就是因为JS-API的Geolocation定位插件，融合了HTML5 Geolocation定位接口

这个坑其实是 navigator.geolocation.getCurrentPosition 的，你如果在这两个浏览器里直接调用这个api就会发现，它就是定位到香港了，这个锅还和高德没有关系，这就没办法了。在edge 浏览器定位是正常的。

最后更换为城市定位解决。

可以独立部署一个高德地图专用的反向代理服务吗？

可以，前端项目和代理服务可以不在一个域、一个服务下。

打赏赞