百度地图APIWord下载.docx
- 文档编号:7343308
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:32
- 大小:29.47KB
百度地图APIWord下载.docx
《百度地图APIWord下载.docx》由会员分享,可在线阅读,更多相关《百度地图APIWord下载.docx(32页珍藏版)》请在冰点文库上搜索。
gray"
id="
container"
>
<
/div>
9.<
/body>
10.<
/html>
11.
12.
metahttp-equiv="
content="
charset=utf-8"
/>
Hello,World<
scripttype="
src="
divstyle="
1pxsolidgray"
id="
2.var
map
=
new
BMap.Map("
);
//
创建地图实例
3.var
point
BMap.Point(116.404,
39.915);
创建点坐标
4.map.centerAndZoom(point,
15);
初始化地图,设置中心点坐标和地图级别
/script>
6.
varmap=newBMap.Map("
//创建地图实例
varpoint=newBMap.Point(116.404,39.915);
//创建点坐标
map.centerAndZoom(point,15);
//初始化地图,设置中心点坐标和地图级别
引用XX地图API文件
当您引用地图API文件时,需要使用自己申请的API密钥。
创建地图容器元素
#000"
1pxsolid#000"
地图需要一个HTML元素作为容器,这样才能展现到页面上。
这里我们创建了一个div元素并制定它的大小。
地图会根据容器大小调整自身尺寸。
命名空间
API使用BMap作为命名空间,所有类均在该命名空间之下,比如:
BMap.Map、BMap.Control、BMap.Overlay。
创建地图实例
1.var
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。
其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
这里我们使用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()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
3.map.centerAndZoom(point,
4.window.setTimeout(function(){
5.
map.panTo(new
BMap.Point(116.409,
39.918));
6.},
2000);
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()方法向地图添加控件。
在此之前地图需要进行初始化。
例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:
2.map.centerAndZoom(new
39.915),
11);
3.map.addControl(new
BMap.NavigationControl());
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addControl(newBMap.NavigationControl());
可以向地图添加多个控件。
在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。
在地图中添加控件后,它们即刻生效。
1.map.addControl(new
2.map.addControl(new
BMap.ScaleControl());
BMap.OverviewMapControl());
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个像素。
opts
{anchor:
BMAP_ANCHOR_TOP_RIGHT,
offset:
BMap.Size(10,
10)}
BMap.NavigationControl(opts));
varopts={anchor:
BMAP_ANCHOR_TOP_RIGHT,offset:
newBMap.Size(10,10)}
map.addControl(newBMap.NavigationControl(opts));
修改控件的配置
地图API的控件提供了丰富的配置参数,您可参考API文档来修改它们以便得到符合要求的控件外观。
本示例将调整平移缩放地图控件的外观。
{type:
BMAP_NAVIGATION_CONTROL_SMALL}
varopts={type:
BMAP_NAVIGATION_CONTROL_SMALL}
自定义控件
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;
this.defaultOffset
10);
6.}
7.//
通过JavaScript的prototype属性继承于BMap.Control
8.ZoomControl.prototype
BMap.Control();
9.//
自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
10.//
在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
11.ZoomControl.prototype.initialize
function(map){
创建一个DOM元素
13.
var
document.createElement("
div"
14.
添加文字说明
15.
div.appendChild(document.createTextNode("
放大2级"
));
16.
设置样式
17.
div.style.cursor
"
pointer"
;
18.
div.style.border
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
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属性修改标定位置。
下面的示例向地图中心点添加了一个标注,并使用默认的标注样式。
4.var
marker
BMap.Marker(point);
创建标注
5.map.addOverlay(marker);
将标注添加到地图中
varmarker=newBMap.Marker(point);
//创建标注
map.addOverlay(marker);
//将标注添加到地图中
定义标注图标
通过BMap.Icon类可实现自定义标注的图标,下面示例通过参数BMap.MarkerOptions的icon属性进行设置,您也可以使用BMap.Marker.setIcon()方法。
4.//
编写自定义函数,创建标注
5.function
addMarker(point,
index){
创建图标对象
7.
myIcon
BMap.Icon("
BMap.Size(23,
25),
{
8.
指定定位位置
9.
imageOffset:
BMap.Size(0,
0
-
index
*
25)
设置图片偏移
10.
});
BMap.Marker(point,
{icon:
myIcon});
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;
10;
++)
BMap.Point(bounds.minX
(Math.random()
0.7
0.15),
bounds.minY
0.15));
i);
22.}
//编写自定义函数,创建标注
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("
function(){
alert("
内存释放
如果您在地图中需要反复添加大量的标注,这可能会占
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 百度 地图 API