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

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

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

注册账号并申请Key&安全密钥

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

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

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

4. 添加成功后,可获取到key值和安全密钥(注意:自2021年12月02日升级,升级之后,您新增key必须配备安全密钥一起使用。

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

准备页面

1.     在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

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

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

3. 为地图容器指定高度、宽度;

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

4. 进行移动端开发时,请在head内添加viewport设置,以达到最佳的绘制性能;

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

5. 下面介绍JS API key和安全密钥设置和使用的两种方式

方式一【强烈建议】:JSAPI  key搭配代理服务器并携带安全密钥转发(安全)或,方式二【不建议】:JSAPI key搭配静态安全密钥以明文设置(不安全)。

  •      方式一【强烈建议】: JSAPI key搭配代理服务器并携带安全密钥转发(安全)

1.  引入地图 JSAPI 脚本之前增加代理服务器设置脚本标签,设置代理服务器域名或地址,并用您的代理服务器域名或地址将「您的代理服务器域名或地址」替换为您代理服务器域名或ip地址;   (注意您这个设置必须是在 JSAPI 的脚本引入之前进行设置,否则设置无效。因为此设置是 JSAPI 基本运行环境的准备

<script type="text/javascript">
        window._AMapSecurityConfig = {
            serviceHost:'「您的代理服务器域名或地址」',// 例如 :serviceHost:'http://10.28.73.10:80',
        }
</script>

      可使用Nginx代理转发的方式或,创建Node代理服务器的方式实现。

2.  使用Nginx代理转发:

首先下载安装Nginx

然后打开Nginx文件夹下nginx.conf文件进行如下设置(下面是Nginx配置文件中一个server节点完整配置)。依次需设置nginx监听转发端口号nginx server_name 以及,配置参数jscode值为您「申请的安全密钥」。

server {
        listen       80; #nginx端口设置
        server_name  127.0.0.1; #nginx server_name 对应进行配置
        #转发到指定域名
        set $testA  /v3; 
        set $testB  /rest;
        location /{
            set $args "$args&jscode=「您申请的安全密钥」";
            #配置rest服务域名
            if ($testA ~* "/v3" ) { 
                 proxy_pass http://restapi.amap.com;
                 break;
           } 
           if ($testB ~* "/rest" ) { 
                 proxy_pass http://restapi.amap.com;
                 break;
           } 
        }
        #用户自定义地图访问域名
        location /v4 {
            set $args "$args&jscode=「您申请的安全密钥」"; 
			proxy_pass http://webapi.amap.com;
        }
        #海外地图访问域名
        location /v3/vectormap {
            set $args "$args&jscode=「您申请的安全密钥」";  
			proxy_pass http://fmap01.amap.com;
        }
}

保存修改后的nginx.conf,在终端执行  nginx -s reload  命令重新加载配置文件。

2.    创建一个Node代理服务器:(node代理服务器的可参考示例文档

  •     方式二【不建议】:JSAPI key搭配静态安全密钥以明文设置(不安全):

  1. 引入地图 JSAPI 脚本之前设置 JSAPI 安全密钥的脚本标签,并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥;

  (注意您这 个设置必须是在  JSAPI 的脚本加载之前进行设置,否则设置无效。

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


6. 在完成如上准备工作之后便可以开始进行开发工作了,查看快速入门。

异步加载 JS API

上一节说明的是最基本的同步加载 JS API 的方式,如果您需要异步加载,比如通过appendChild,或者通过require等异步方式来加载,这时需要您需要先准备一个全局的回调函数作为 JS API 异步加载的回调函数,并将其函数名作为callback参数添加在 JS API 的引用地址后面,此时要注意,回调函数应该在脚本请求发出之前进行声明。异步加载方式只有在回调之后,才能开始调用JSAPI的相关接口。比如

  window.onLoad  = function(){
        var map = new AMap.Map('container');
  }
  var url = 'http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
  var jsapi = doc.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);

注意:JS API异步加载的方式和同步加载方式两种方式,在使用获取的新key时必须搭配安全密钥一起使用(自2021年12月02日升级,升级之后申请的key必须配备安全密钥一起使用。)使用方式参考上一节中JSAPI key和安全密钥设置和使用

更多的加载方式,请查看「JS API 的加载

HTTPS 的支持

JSAPI 1.3 开始完全支持 HTTPS 协议,如需使用安全协议,替换 JS API 的入口脚本URL中的httphttps即可。随着 Chrome、iOS 等相继限制非安全域的定位请求,我们建议您升级网站到HTTPS协议,并使用HTTPS协议加载 JS API。

注意:JS API加载的方式,在使用获取的新key值必须搭配安全密钥一起使用(自2021年12月02日升级,此次升级之后申请的key必须配备安全密钥一起使用。)使用方式参考上一节中JSAPI key和安全密钥设置和使用

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

安全代理服务转发方式

相关文档

快速上手

地图的组成与名词解释

基础类说明

地图 JS API 示例

新用户
福利
示例
中心
常见
问题
智能
客服