百度地图API详解之地图初始化

博客原文地址：http://www.jiazhengblog.com/blog/2011/06/02/258/

从今天开始我会陆续写一些有关百度地图API开发的文章，每篇文章会针对API的某个功能进行详细的讲述。本文将介绍有关地图初始化部分的内容（本系列文章将使用最新版本的API）。

地图初始化是开发地图应用的第一步，只有初始化完成后才能开始其他功能的开发。否则地图将不能正常工作。

首先，我们要准备一个HTML容器用来显示地图，这里选用一个div元素，同时设置好宽度和高度。代码如下：

<div id="container" style="width:600px;height:400px;"></div>

我们需要创建一个Map类的实例，你可以认为一个实例就对应着一个地图，如果你的页面需要展示多个不同的地图，那么就需要创建多个Map类的实例。创建Map类实例的代码如下：

var map =new BMap.Map('container');

在构造函数里，我们传入容器元素的id，当然也可以是元素本身，告诉API我希望在哪个地方展示地图。注意，到这里地图初始化工作并没有完成，此时如果查看页面，则会发现元素中除了有个灰色背景外什么也没有。

此时API只进行一部分的初始化工作，包括：给容器元素添加特定样式，创建内部的HTML元素、绑定DOM事件，如果通过firebug等调试工具会发现你提供的div容器里面已经不再是空的了。

要想让容器里展示地图还需要给API提供两个东西：地理位置和展示级别。地理位置就是告诉API显示哪里的地图，在北京还是在上海？还是在广州？地理位置是通过经纬度来描述的，百度地图也如此。展示级别告诉API以多大的比例显示地图。在初中地理课上学过，地图是有比例尺的，比例尺通常会告诉地图上一厘米代表实际多少公里。地图API也如此，但是它是以像素作为基准的，不同的级别下每个像素所代表的米数是不同的，级别越高每像素等于的米数就越少，反之则越大。视觉上看就是级别越高地图越详细。目前百度地图支持的级别范围是1到19，在19级下，地图上一个像素表示0.5米（注：目前1.2版本支持到19级，1.1及以前版本支持到18级）。

下面代码提供一个经纬度和一个级别，进行地图初始化：

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

东经116.404度，北纬39.915度大约是在天安门的位置，当然经纬度后面的位数越多越能精确的表示一个点，级别给11，现在会在浏览器看到这个效果：

方法centerAndZoom接收到一个坐标和一个级别后就开始进行相应的计算，接着会根据计算结果获取相应的图块，最终显示在浏览器中。至此，地图初始化才全部完成。

如果你不知道北京的经纬度信息怎么办？1.2版本的API有个更方便的功能：通过城市名称进行地图初始化。

map.centerAndZoom('北京');

此时API会根据你提供城市名来查找其中心位置，并根据容器大小来决定级别，保证城市中心区域都能显示在视野中，假如我们不改变容器大小使用上述方式来初始化地图，你将得到和之前一致的结果，但如果你把容器宽高改为300x200，则会得到以下效果：

我们看到中心没有变但是级别发生了变化，因为容器变小了，这是为了保证能够在视野范围内展示北京市中心区域。通过这种方式初始化地图的好处就是你不必知道经纬度、级别这些概念就能让API开始显示地图，API这么做也是最大限度降低开发者的使用成本。当然，任何事物都有两面性（仿佛是政治课的内容），这种方式初始化有两个问题：首先，初始化过程是异步的，你不能立刻在centerAndZoom代码之后获取地图状态（比如中心点、视野范围等），而需要通过监听地图load事件来进行后续的操作，第二，初始化过程会比前者稍慢，因为此时会有网络请求，请求返回之后才能确定地图中心和级别。

比如你只能通过如下方式获取地图中心点：

map.addEventListener('load', function(){
alert(map.getCenter().lng +', '+ map.getCenter().lat);
});

map.centerAndZoom('上海');

Map类提供了isLoaded方法，通过它就能知道地图是否加载完成，我们可以来看看在两种不同的初始化方式中调用此方法的结果如何：

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
alert(map.isLoaded()); // true

如果用城市名这种方式，你会发现centerAndZoom方法执行完成后地图并没有初始化完成：

map.centerAndZoom('上海');
alert(map.isLoaded()); // false

转载于:https://www.cnblogs.com/jz1108/archive/2011/06/14/2080934.html