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