您现在的位置: 开发 > 地图 JS API v2.0 > 教程 > 入门 > 准备

准备 最后更新时间: 2021年12月16日

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。

注册账号并申请Key

1. 首先,注册开发者账号,成为高德开放平台开发者

2. 登陆之后,在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」,设置域名白名单,可选(建议设置域名白名单)。

4. 添加成功后,可获取到key值安全密钥jscode自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

注意:此次升级不会影响之前已获得 key 的使用;升级之后的新增的key必须要配备安全密钥一起使用,具体用法请您参看下文JSAPI key和安全密钥设置和使用》(本次key升级新增安全密钥,是为了提升广大用户的对自己的key安全有效管理,降低明文传输被窃取的风险 。)

准备页面

1. 如果是移动端开发,请在head标签内添加viewport meta标签,以达到最佳的绘制性能;

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

2. 添加div标签作为地图容器,同时为该div指定id属性;

<div id="container"></div> 

3. 通过 css 为地图容器指定高度、宽度

#container {width:300px; height: 180px; }  

4. JSAPI key和安全密钥的使用

方式一【强烈建议】: 

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

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

<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> 

2)代理服务器的设置

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

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

方式二【不建议】

JSAPI key搭配静态安全密钥以明文设置(不安全,建议开发环境用):

引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签,并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥;(注意这个设置必须是在  JSAPI 的脚本加载之前进行设置,否则设置无效。

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 

5. 除直接引入JSAPI 脚本之外,还可点击查看更多 JSAPI 加载方式(非常重要)

6. 在完成如上准备工作之后,您便可以开始参考后续文档进行开发了。

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