javascript调用百度地图,以及城市的初始化

地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结:

一、引入JS:这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件来自百度的服务器(所以必须得联网,不然就没戏。。),我们以后用到的所有方法都写在这个JS文件当中。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

这里的1.4为JS版百度地图的版本号,目前最新版本为1.4。(理论上这条语句是可以放在html文件中的任何位置,但是一般人们都放在标签之前,不过我曾看到一本书上说放在前,效率是最高的。)

二、在你的html文件中新建一个

容器:添加一个id属性(这里为
)。这个容器是用来放置百度地图的,地图的大小可以通过调节div的样式实现。

三、新建一个百度地图

<script type="text/javascript"> 
var map = new BMap.Map("container"); // 创建地图实例;("container")就是刚才新建的div的id属性值 
var point = new BMap.Point(116.404, 39.915); // 创建点坐标;这个点是由经度和纬度构成的,点可以随意选取 
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
//map.centerAndZoom("杭州");//这条语句可以代替上面那一条,系统会自动定位到该城市,城市名可以根据用户需要自己定//当然,如果这样子写,那就不需新建point点了 
</script>

只要这三步,就可以建立一个百度地图web应用。当然,还需要调节样式之类的。

下面是一个完整的HTML文件:(该例子来自百度官网)

<!DOCTYPE html><!--HTML5--> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px}
#container{height:100%} 
</style> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 
</head> 
         
<body> 
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container"); // 创建地图实例 
var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
</script> 
</body> 
</html>

要想让容器里展示地图还需要给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