百度地图的基本使用

接口版本

JavaScript API GL（GL版本）

JavaScript API GL v1.0 是基于WebGL全新开发的地图API接口。为了方便开发者迁移升级，大部份接口向下兼容。目前GL v1.0版本接口包含了3D地图的渲染、基本控件、覆盖物。在后面的版本中，将对原v2.0、v3.0中的核心功能进行补全。

由于基于WebGL开发，对于用户的浏览器环境有兼容性要求，需要完整支持WebGL的现代浏览器来支持渲染，对于WebGL支持欠佳的浏览器会降级为Canvas绘制。

在开发中我们首选用JavaScript API GL的版本

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥" />
var mp = new BMapGL.Map('map'); 
mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11);

JavaScript API

JavaScript API是一套由JavaScript语言编写的应用程序接口，可在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发。

JavaScript API v3.0 是在 v2.0 的基础上进行开发的，并针对2.0的一些接口进行了升级，为开发者提供更完善的服务。v3.0的绝大部分接口向下兼容，开发者仅需要修改版本参数 （v=3.0） 就可以切换到JavaScript API v3.0版本。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" />
var mp = new BMap.Map('map');  
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  

JavaScript API GL版本对手机性能要求较高，当前版本不建议在移动端调用。若涉及移动端JS服务调用，请使用JavaScript API v3.0版本。

JavaScript API Lite

和JavaScript API标准版相比，Lite版专门针对移动端H5页面的使用场景，代码体积小，性能更好。

基本使用方法

1. 引入 js 库，注意需要附带申请的密钥 ak

<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script>

2. 编写容器组件

<div id="allmap"></div>

3. 初始化 Map 对象

var map = new BMapGL.Map("allmap"); // 创建Map实例

4. 初始化 Point 对象，即中心坐标点

var point = new BMapGL.Point(116.404, 39.915); // 初始化中心点坐标

5. 初始化地图并设置中心点和地图级别

map.centerAndZoom(point, 12);  // 初始化地图，设置中心点坐标和地图级别

注意：这里画出的地图有个百度logo的标志，我们这里要去掉logo方法：

.anchorBL, .BMap_cpyCtrl {
    display: none;
}

异步加载地图

在对性能敏感的场景下，我们可以选择异步加载百度地图，从而加快首屏的渲染速度。

具体操作就是在src后面加了一个callback=init，意思是当加载完成完后会执行init方法，这是百度帮我们做了。

<script type="text/javascript">
	function init() { 
		var map = new BMapGL.Map('allmap'); 
		var point = new BMapGL.Point(116.404, 39.915);
		map.centerAndZoom(point, 12);
		map.enableScrollWheelZoom(true);
	} 
			
	function loadScript() { 
		var script = document.createElement("script"); 
		script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=&callback=init";
		document.body.appendChild(script); 
	} 
			
	window.onload = loadScript;
</script>

如果我们自己实现一个异步加载，怎么做呢？

function loadScript(src, callback) {
  var script = document.createElement('script'),
  head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = src;
  // 监听load事件
  script.addEventListener('load', function () {
      callback();
  }, false);
  head.appendChild(script);
}
window.onload = loadScript;

3D地图

可以使用 heading 和 tilt 属性控制地图的旋转角度和俯角，这样就可以形成一个3D效果。

map.setHeading(40);   // 设置地图旋转角度
map.setTilt(70); 

地图控件

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

定制化个性地图

首先到百度文档找到定制地图，然后选中喜欢的地图颜色，最后会有一个styleid，复制之后，添加以下代码：

map.setMapStyleV2({
    styleId: 'a0c43e8c7279db0a4a032712d0e4c32c'
});

还有很多api这里就不举例了，比如在地图上添加覆盖物，地图动画等，参考文档。