如何获取百度地图开放平台 API 密钥(分步指南)

在位置服务和地理信息开发领域，百度地图开放平台API为开发者提供了强大的工具，支持实时的地理位置查询、路线规划、地图展示等功能。要使用该平台，开发者首先需要获取一个API密钥，用于验证API请求的合法性和记录调用信息。通过百度地图开放平台API，用户可以构建丰富的地理信息应用，如导航系统、物流配送优化、或用户位置服务。本文将指导你如何百度地图开放平台 API密钥，并进行初步的可用性测试，同时探讨在使用过程中需要考虑的其他关键因素。

1. 获取百度地图开放平台 API秘钥步骤

获取百度地图开放平台 API密钥的过程相对简单，只需几个步骤即可完成：

账号注册

1.进入百度地图开放平台官网，点击右上角【登录】按钮，进入百度账号登录页面

%E6%B3%A8%E5%86%8C1.jpg

2.如您已经拥有百度账号，请通过扫码/用户名验证的方式直接登录；如您还未拥有百度账号请您点击【注册】完成账号注册

%E6%B3%A8%E5%86%8C2.png

3.通过百度账号注册成为百度地图开放平台开发者，选择开发者类型（个人/企业），完成开发者认证即可

AK秘钥申请

JavaScript API只支持浏览端的AK进行接入与访问，请开发者在申请AK时注意选择正确的AK类型。

1.进入百度地图开放平台官网控制台，点击【应用管理】-【我的应用】

%E6%B3%A8%E5%86%8C4.png

2.点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

%20%E6%B3%A8%E5%86%8C5.png

3.为了防止您的AK被盗用，请您务必配置refer白名单，只有该白名单中的网站才能成功发起调用。如下方示例所示，配置了*.mysite.com*为域名白名单，即代表域名中包含.mysite.com的网站=才可以使用该AK访问JS API的服务

%E6%B3%A8%E5%86%8C6.png

4.查看API密钥：新建成功以后在我的应用中就能看到刚才创建的应用AK

2. 百度地图开放平台 API密钥可用性测试

在获取API密钥后，进行可用性测试是确保其正常工作的重要步骤。以下是使用案例

百度地图开放平台功能较多，以下是 创建地图>展示地图 案例

1.编写HTML页面的基础代码

在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。

<!DOCTYPE html>  
<html>  
<head>  
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title>Baidu Map </title>  
  <style type="text/css">  
      html{height:100%}  
      body{height:100%;margin:0px;padding:0px}  
      #container{height:100%}  
  </style>  
</head>  
<body>
</body>  
</html>

2.引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

3.初始化地图逻辑

首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图

var map = new BMapGL.Map("container");         // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

4.开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

5.设置地图的旋转角度和倾斜角度

地图可以自定义旋转角度和倾斜角角度map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
  enableRotate: false,
  enableTilt: false
});

至此我们完成了一个完整的地图展示的例子