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

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

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

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

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

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

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

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

c1579bef548c974bfcfa3ce2

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

66988fde2fcdda05cdbf1a5a

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

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

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

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

833962df2731c04e4854030b

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

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

1
map.centerAndZoom( '北京' );

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

d4b65ed0cf509dd2a1ec9c26

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

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

1
2
3
4
map.addEventListener( 'load' , function (){
     alert(map.getCenter().lng + ', ' + map.getCenter().lat);
});
map.centerAndZoom( '上海' );

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

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

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

1
2
map.centerAndZoom( '上海' );
alert(map.isLoaded()); // false
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值