软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 百度地图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到18,在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
    相关阅读
    网友评论
    栏目导航
    推荐软件