Web应用集成百度地图功能

前言

在日常开发中，碰到有些功能是需要集成地图功能，目前在国内，做的比较好的地图服务商有百度地图、高德地图以及腾讯地图，而且中百度地图算是其中比较流行的一家地图服务商。
下面将平时日常开发中遇到的百度地图开发相关的问题记录一下，以便日后查阅。

准备

首先是登录百度地图开放平台控制台，创建应用。

在以下创建应用界面输入相关信息，本文讲解的是浏览器端开发，所以应用雷璇选择“浏览器端”。

提交后审核通过后则会分配一个应用密钥。

开发

引入js

对于常规的WEB应用，只需要在html头部引入js即可。

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

而对于一些应用，百度秘钥不是固定的，而是通过一些方式获取，这样的话上面的方法就行不通了，需要通过动态获取密钥，然后通过js的方式在html头部添加js。如下：

// getBaiduMapAK为具体的获取百度地图秘钥的方法
getBaiduMapAK().then(ak => {
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=initMap`;	// 其中initMap为加载js成功后的回调方法
  document.body.appendChild(script);
})

window.initMap = function(){
  // ...
}

初始化地图

百度地图需要一个html元素作为容器，可以在页面上随意放置一个div即可。

<div id="map_container"></div>

之后便可以对该元素初始化百度地图

var map = new BMapGL.Map('map_container');

此时地图已经初始化完成，但是仅仅是这样，地图是没办法显示的，需要将地图设置一个中心点坐标，并将地图缩放至适当水平。

// 经纬度 116.404, 39.915 为北京
var point = new BMapGL.Point(116.404, 39.915);
// centerAndZoom方法是将point点设置为坐标，并缩放至13的展示级别
map.centerAndZoom(point, 13);

对于centerAndZoom方法，官方文档给出如下说明：

如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。

此时页面上就能够展示百度地图了。

写在最后

以上只是讲解了简单的集成百度地图，另外对于一些复杂的功能，在后面的文章会具体讲解。