百度地图插件开发使用一
地图开发
1． 首先我们看怎么获取API
通过地址http://api.map.baidu.com/api 加载API：
<script src="http://api.map.baidu.com/api?key=您的API 密钥&v=版本&services=true 或者false" type="text /javascript"></script>
其中参数key 为密钥，您可以在 http://developer.baidu.com/map/apply-key.htm申请。参数v 为当前API 的版本号，目前最新版本为1.3，services 参数表示是否加载服务部分，true 表示加载，false 表示不加载。
2． 第一个实例
现在我们看看第一个实例”Hello word”
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div> </body> </html>
<script type="text/javascript" >
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。 【标，级别】
</script>
</body>
</html>
下面我们来逐步分析代码程序
1. 我们引用地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api？key=afsjfklasjflerwer54534354354&v=1.3&services=false"></script>
2. 创建地图容器元素
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
地图需要一个HTML元素作为容器，这样才能展现到页面上，这里我们创建了一个div元素，注意：一定要给这个元素给个id属性值
3. 命名空间 API使用BMap作为命名空间，所有类均在改命名空间下，比如：BMap.Map， BMap.Control.
4. 创建地图实例 var map = new BMap.Map("container"); 位于BMap 命名空间下的Map 类表示地图，通过new 操作符可以创建一个地图实例。其参数可以是元素id 也可以是元素对象。 注意在调用此构造函数时应确保容器元素已经添加到地图上。
5. 创建点坐标 var point = new BMap.Point(116.404, 39.915); 这里我们使用BMap 命名空间下的Point 类来创建一个坐标点。Point 类描述了一个地理坐标 点，其中116.404表示经度，39.915表示纬度。
6. 地图初始化 map.centerAndZoom(point,15); 在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中 心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。 3． 地图的操作
地图被实例化并完成初始化以后，就可以与其进行交互了。
API 中的地图对象的外观与行为 与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。 您也可以修改配置来改变这些功能。
您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法
1. 下面这个实例显示一个地图，在等待两秒后会重新回到地图的中点。如果移动距离过大则地图直 接跳到该点。
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
</script>
2.地图控件
我们经常可以看到地图中有一个小控件，这个控件可以改变地图显示程度。
百度地图 API中提供了丰富的控件，你可以自己动手做一个漂亮的控件
地图API中提供的控件有：
NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩 放的功能。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
CopyrightControl：版权控件，默认位于地图左下方。
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
</script>
添加控件我们可以用map.addControl()来实现。
3 . 覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折 线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会 相应的移动。
地图API 提供了如下几种覆盖物：
Overlay：覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜 色。
InfoWindow：信息窗口也是一种特殊的覆盖物。
注意：同一时刻只能有一个信息窗口在地 图上打开。 可以使用BMap.Map.addOverlay() 方法向地图添加覆盖物，
使用 BMap.Map.removeOverlay()方法移除覆盖物，注意此方法不适用于InfoWindow。
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
标注表示地图上的点。
API 提供了默认图标样式，您也可以通过Icon 类来指定自定义图标。
BMap.Marker 的构造函数的参数为BMap.Point 和BMap.MarkerOptions（可选）。
注意： 当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon 的offset 属性修改标定位置。
1. 信息窗口 信息窗口在地图上方的浮动显示HTML 内容。信息窗口可直接在地图上的任意位置打开， 也可以在标注对象上打开（此时信息窗口的坐 标与标注的坐标一致）。
您可以使用 BMap.InfoWindow 来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于 打开状态。
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
map.centerAndZoom(point, 15);
var opts = {
width : 100, // 信息窗口宽度
height: 50, // 信息窗口高度
title :"名称" , // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(keyword, opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,poi.point); //开启信息窗口
});
</script>
