520px;height:
340px;border:
1pxsolid#000"id="container">
地图需要一个HTML元素作为容器，这样才能展现到页面上。
这里我们创建了一个div元素并制定它的大小。
地图会根据容器大小调整自身尺寸。
命名空间
API使用BMap作为命名空间，所有类均在该命名空间之下，比如：
BMap.Map、BMap.Control、BMap.Overlay。
创建地图实例
1.var map = new BMap.Map（"container"）;
varmap=newBMap.Map（"container"）;
位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。
其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
1.var point = new BMap.Point（116.404, 39.915）;
varpoint=newBMap.Point（116.404,39.915）;
这里我们使用BMap命名空间下的Point类来创建一个坐标点。
Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
地图初始化
1.map.centerAndZoom（point,15）;
map.centerAndZoom（point,15）;
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom（）方法要求设置中心点坐标和地图级别。
地图必须经过初始化才可以执行其他操作。
地图操作
地图被实例化并完成初始化以后，就可以与其进行交互了。
API中的地图对象的外观与行为与XX地图网站上交互的地图非常相似。
它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。
您也可以修改配置来改变这些功能。
您还可以通过编程的方式与地图交互。
Map类提供了若干修改地图状态的方法。
例如：
setCenter（）、panTo（）、zoomTo（）等等。
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。
panTo（）方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
1.var map = new BMap.Map（"container"）;
2.var point = new BMap.Point（116.404, 39.915）;
3.map.centerAndZoom（point, 15）;
4.window.setTimeout（function（）{
5. map.panTo（new BMap.Point（116.409, 39.918））;
6.}, 2000）;
varmap=newBMap.Map（"container"）;
varpoint=newBMap.Point（116.404,39.915）;
map.centerAndZoom（point,15）;
window.setTimeout（function（）{
map.panTo（newBMap.Point（116.409,39.918））;
},2000）;
地图控件概述
XX地图上负责与地图交互的UI元素称为控件。
XX地图API中提供了丰富的控件，您还可以通过BMap.Control来实现自定义控件。
地图API中提供的控件有：
∙Control：
控件的抽象基类，所有控件均继承此类的方法、属性。
通过此类您可实现自定义控件。
∙NavigationControl：
地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
∙OverviewMapControl：
缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
∙ScaleControl：
比例尺控件，默认位于地图左下方，显示地图的比例关系。
∙CopyrightControl：
版权控件，默认位于地图左下方。
所有这些控件都基于BMap.Control类。
向地图添加控件
可以使用BMap.Map.addControl（）方法向地图添加控件。
在此之前地图需要进行初始化。
例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
1.var map = new BMap.Map（"container"）;
2.map.centerAndZoom（new BMap.Point（116.404, 39.915）, 11）;
3.map.addControl（new BMap.NavigationControl（））;
varmap=newBMap.Map（"container"）;
map.centerAndZoom（newBMap.Point（116.404,39.915）,11）;
map.addControl（newBMap.NavigationControl（））;
可以向地图添加多个控件。
在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。
在地图中添加控件后，它们即刻生效。
1.map.addControl（new BMap.NavigationControl（））;
2.map.addControl（new BMap.ScaleControl（））;
3.map.addControl（new BMap.OverviewMapControl（））;
map.addControl（newBMap.NavigationControl（））;
map.addControl（newBMap.ScaleControl（））;
map.addControl（newBMap.OverviewMapControl（））;
控制控件的位置
初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。
其中anchor和offsetX、offsetY共同控制控件在地图上的位置。
anchor表示控件停靠在地图的哪个角，允许的值为：
∙BMAP_ANCHOR_TOP_LEFT
∙BMAP_ANCHOR_TOP_RIGHT
∙BMAP_ANCHOR_BOTTOM_LEFT
∙BMAP_ANCHOR_BOTTOM_RIGHT
除了指定停靠位置外，还可以提供偏移量，用来指示控件距离地图边界相隔多少像素。
本示例将标准地图控件放置在地图的右上角，间隔10个像素。
1.var opts = {anchor:
BMAP_ANCHOR_TOP_RIGHT, offset:
new BMap.Size（10, 10）}
2.map.addControl（new BMap.NavigationControl（opts））;
varopts={anchor:
BMAP_ANCHOR_TOP_RIGHT,offset:
newBMap.Size（10,10）}
map.addControl（newBMap.NavigationControl（opts））;
修改控件的配置
地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。
本示例将调整平移缩放地图控件的外观。
1.var opts = {type:
BMAP_NAVIGATION_CONTROL_SMALL}
2.map.addControl（new BMap.NavigationControl（opts））;
varopts={type:
BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl（newBMap.NavigationControl（opts））;
自定义控件
XX地图API允许您通过继承BMap.Control来创建自定义地图控件。
（注意JavaScript是通过prototype属性进行继承的）
要创建可用的自定义控件，您需要实现类定义中的一个抽象方法并给两个属性赋值，它们是：
initialize（）和defaultAnchor、defaultOffset。
initialize（）方法必须返回控件容器的DOM元素，defaultAnchor为控件默认的停靠位置，defaultOffset为控件默认的间隔距离。
所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，这个地图容器可以通过BMap.Map.getContainer（）方法获得。
在此示例中，创建一个简单的放大控件，每一次点击将地图放大两个级别。
它具有文本标识，而不是平移缩放控件中使用的图形图标。
1.// 定义一个控件类，即function
2.function ZoomControl（）{
3. // 设置默认停靠位置和偏移量
4. this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
5. this.defaultOffset = new BMap.Size（10, 10）;
6.}
7.// 通过JavaScript的prototype属性继承于BMap.Control
8.ZoomControl.prototype = new BMap.Control（）;
9.// 自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
10.// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
11.ZoomControl.prototype.initialize = function（map）{
12. // 创建一个DOM元素
13. var div = document.createElement（"div"）;
14. // 添加文字说明
15. div.appendChild（document.createTextNode（"放大2级"））;
16. // 设置样式
17. div.style.cursor = "pointer";
18. div.style.border = "1px solid gray";
19. div.style.backgroundColor = "white";
20. // 绑定事件，点击一次放大两级
21. div.onclick = function（e）{
22. map.zoomTo（map.getZoom（） + 2）;
23. }
24. // 添加DOM元素到地图中
25. map.getContainer（）.appendChild（div）;
26. // 将DOM元素返回
27. return div;
28.}
29.// 创建控件
30.var myZoomCtrl = new ZoomControl（）;
31.// 添加到地图当中
32.map.addControl（myZoomCtrl）;
地图覆盖物概述
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。
如标注、矢量图形元素（包括：
折线和多边形）、信息窗口等。
覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API提供了如下几种覆盖物：
∙Overlay：
覆盖物的抽象基类，此类不可实例化，所有的覆盖物均继承此类的方法。
∙Marker：
标注表示地图上的点，可自定义标注的图标。
∙Label：
表示地图上的文本标注，您可以自定义标注的文本内容。
∙Polyline：
表示地图上的折线。
∙Polygon：
表示地图上的多边形。
多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
∙InfoWindow：
信息窗口也是一种特殊的覆盖物。
注意：
同一时刻只能有一个信息窗口在地图上打开。
可以使用BMap.Map.addOverlay（）方法向地图添加覆盖物，使用BMap.Map.removeOverlay（）方法移除覆盖物，注意此方法不适用于InfoWindow。
标注
标注表示地图上的点。
API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。
BMap.Marker的构造函数的参数为BMap.Point和BMap.MarkerOptions（可选）。
注意：
当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
下面的示例向地图中心点添加了一个标注，并使用默认的标注样式。
1.var map = new BMap.Map（"container"）;
2.var point = new BMap.Point（116.404, 39.915）;
3.map.centerAndZoom（point, 15）;
4.var marker = new BMap.Marker（point）; // 创建标注
5.map.addOverlay（marker）; // 将标注添加到地图中
varmap=newBMap.Map（"container"）;
varpoint=newBMap.Point（116.404,39.915）;
map.centerAndZoom（point,15）;
varmarker=newBMap.Marker（point）;//创建标注
map.addOverlay（marker）;//将标注添加到地图中
定义标注图标
通过BMap.Icon类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions的icon属性进行设置，您也可以使用BMap.Marker.setIcon（）方法。
1.var map = new BMap.Map（"container"）;
2.var point = new BMap.Point（116.404, 39.915）;
3.map.centerAndZoom（point, 15）;
4.// 编写自定义函数，创建标注
5.function addMarker（point, index）{
6. // 创建图标对象
7. var myIcon = new BMap.Icon（" new BMap.Size（23, 25）, {
8. offset:
new BMap.Size（10, 25）, // 指定定位位置
9. imageOffset:
new BMap.Size（0, 0 - index * 25） // 设置图片偏移
10. }）;
11. var marker = new BMap.Marker（point, {icon:
myIcon}）;
12. map.addOverlay（marker）;
13.}
14.// 随机向地图添加10个标注
15.var bounds = map.getBounds（）;
16.var lngSpan = bounds.maxX - bounds.minX;
17.var latSpan = bounds.maxY - bounds.minY;
18.for （var i = 0; i < 10; i ++） {
19. var point = new BMap.Point（bounds.minX + lngSpan * （Math.random（） * 0.7 + 0.15）,
20. bounds.minY + latSpan * （Math.random（） * 0.7 + 0.15））;
21. addMarker（point, i）;
22.}
varmap=newBMap.Map（"container"）;
varpoint=newBMap.Point（116.404,39.915）;
map.centerAndZoom（point,15）;
//编写自定义函数，创建标注
functionaddMarker（point,index）{
//创建图标对象
varmyIcon=newBMap.Icon（"newBMap.Size（23,25）,{
offset:
newBMap.Size（10,25）,//指定定位位置
imageOffset:
newBMap.Size（0,0-index*25）//设置图片偏移
}）;
varmarker=newBMap.Marker（point,{icon:
myIcon}）;
map.addOverlay（marker）;
}
//随机向地图添加10个标注
varbounds=map.getBounds（）;
varlngSpan=bounds.maxX-bounds.minX;
varlatSpan=bounds.maxY-bounds.minY;
for（vari=0;i<10;i++）{
varpoint=newBMap.Point（bounds.minX+lngSpan*（Math.random（）*0.7+0.15）,
bounds.minY+latSpan*（Math.random（）*0.7+0.15））;
addMarker（point,i）;
}
监听标注的事件
事件方法与Map事件机制相同。
可参考事件部分。
1.marker.addEventListener（"click", function（）{
2. alert（"您点击了标注"）;
3.}）;
marker.addEventListener（"click",function（）{
alert（"您点击了标注"）;
}）;
内存释放
如果您在地图中需要反复添加大量的标注，这可
展开阅读全文
相关搜索
升级会员 