如何调用百度地图api

前言

最近，博主老师要求我们制作一个PPT，内容已经基本完成，但还差一张地图作为关键部分的展示。这张地图需要清晰地展示某个区域的地理位置、路线或分布情况，以便更好地支持我们的讲解内容。为了找到合适的地图，我首先考虑了使用在线地图工具，比如Google Maps或百度地图，通过截图的方式获取静态地图。但后来，想了一下可以尝试调用api，就当巩固知识。

一.注册百度地图，申请成为开发者

百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案 (baidu.com)

打开文档与支持中【地图 JS API】

点击【申请成为开发者】

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

AK秘钥申请

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

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

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

为了确保您的AK（访问密钥）不被滥用，您需要设置一个refer白名单。只有列入白名单的网站才能通过该AK调用JS API服务。例如，如果您将白名单配置为*.mysite.com*，这意味着只有域名中包含.mysite.com的网站才能使用该AK访问相关服务。这样可以有效限制访问权限，防止未授权的网站盗用您的AK。

这里大家自行设置，我最开始设置的是“localhost”，但是不知道是什么原因在我的电脑上运行不了。最后，我设置的是“*”，“*”的意思是不对任何域名做限制。

创建成功

二.调用百度地图api

回到文档，点击【Hello World】,这是一个DEMO实例，可以直接复制使用，但在这里我们还是一步一步去了解。

我们可以在pycharm中新建一个HTML工程

适应移动端页面展示

下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。

   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">

主体框架分为五步：

1.引用百度地图API文件（js文件）

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

用你的密钥替换

2.创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。这里我们设置容器大小。

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

3.创建地图实例

位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map = new BMapGL.Map("container");

4.设置中心点坐标

这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMapGL.Point(116.404, 39.915);

这里只是以北京天安门为准，也可以自己设置。参考高德地图开放平台坐标拾取器

5.地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作

map.centerAndZoom(point, 15); 

到这里就完成了一个对百度地图api的调用

这里还有很多控件 ，大家自行研究

最后，希望对大家的学习有所帮助！！！