百度舆图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

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!