收藏

下载资源 加入VIP,免费下载

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

地图需要一个HTML元素作为容器，这样才能展现到页面上。

这里我们创建了一个div元素并制定它的大小。

地图会根据容器大小调整自身尺寸。

1.2.3命名空间

API使用BMap作为命名空间，所有类均在该命名空间之下，比如：

BMap.Map、BMap.Control、BMap.Overlay。

1.2.4创建地图实例

varmap=newBMap.Map（"container"）;

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。

其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

构造函数

说明

Map（container:

String|HTMLElement[,opts:

MapOptions]）

在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom（）方法对地图进行初始化。

未进行初始化的地图将不能进行任何操作。

请注意因为JavaScript是松散类型的语言，我们可以不填写构造函数的任何可选参数。

1.2.5创建点坐标

varpoint=newBMap.Point（116.404,39.915）;

这里我们使用BMap命名空间下的Point类来创建一个坐标点。

Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。

1.2.6初始化地图

map.centerAndZoom（point,15）;

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom（）方法要求设置中心点坐标和地图级别。

地图必须经过初始化才可以执行其他操作。

1.2.7地图操作

地图被实例化并完成初始化以后，就可以与其进行交互了。

API中的地图对象的外观与行为与XX地图网站上交互的地图非常相似。

它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。

您也可以修改配置来改变这些功能。

您还可以通过编程的方式与地图交互。

Map类提供了若干修改地图状态的方法。

例如：

setCenter（）、panTo（）、zoomTo（）等等。

下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。

panTo（）方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。

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）;

本节完整参考代码：

2应用示例

本章节介绍一些地图的基本应用和部分API的使用。

示例代码会结合ExtJS一起展示，因为ExtJS不是本文主要介绍的技术，所以在这里不做过多的讲解，如果想了解详情，请“XX”ExtJS。

本文中所写的代码均为示例代码，不能保证程序的正常运行，如需完全代码，请参见每章节结束部分的“本节完整参考代码”。

本文不会详细介绍XXAPI类与Ext类的具体使用方法，如果需要了解，请参考相关的参考资料。

2.1Map类

此类是地图API的核心类，用来实例化一个地图。

事件介绍

事件

说明

参数

click

鼠标点击地图时会触发此事件。

event{type,target,pixel,point}

注：

这里面的参数是在回调函数中使用的。

2.2ExtJs

本示例使用的Ext类：

●Ext.Viewport：

冲当整个浏览器的显示区域，并实现显示区域分割。

在右边的区域嵌入XX地图。

●Ext.grid.GridPanel：

装载标注信息列表。

位置在页面的左边。

●Ext.data.Store：

表格数据的存储器。

●Ext.grid.ColumnModel：

表格的列信息。

●Ext.data.Record：

数据记录集。

与Store配合使用。

注：

Ext的版本为3.2.0。

参考代码：

record_Point=Ext.data.Record.create（[

{name:

'point_id',type:

'string'},

{name:

'name',type:

'string'},

{name:

'lat',type:

'string'},

{name:

'lng',type:

'string'}

]）;

store=newExt.data.Store（{

proxy:

newExt.data.HttpProxy（{

url:

""

}）,

reader:

newExt.data.JsonReader（{},record_Point）

}）;

colModel=newExt.grid.ColumnModel（[

{header:

"坐标id",dataIndex:

'point_id',hidden:

true},

{header:

"编号",width:

100,dataIndex:

'name'},

{header:

"纬度",width:

100,dataIndex:

'lat'},

{header:

"经度",width:

100,dataIndex:

'lng'}

]）;

gridPanel=newExt.grid.GridPanel（{

store:

store,

cm:

colModel,

sm:

newExt.grid.RowSelectionModel（{singleSelect:

true}）,

autoHeight:

true,

stripeRows:

true,

margins:

'0000',

style:

{width:

'100%',height:

'100%'},

stateful:

true,

stateId:

'grid'

}）;

程序运行结果：

2.2.1将XX地图嵌入到Ext中

1.首先在页面的标签中引用XXAPI与Ext的三个必要文件。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

2.在js中定义装载XX地图的DIV元素mapDiv。

//装载地图用的div

varstrHtml="

100%;height:

100%;border:

1pxsolidgray'id='mapDiv'>12";

3.添加数据列表GridPanel

gridPanel=newExt.grid.GridPanel（{

store:

store,

cm:

colModel,

sm:

newExt.grid.RowSelectionModel（{singleSelect:

true}）,

autoHeight:

true,

//title:

'位置信息',

stripeRows:

true,

margins:

'0000',

style:

{width:

'100%',height:

'100%'},

stateful:

true,

stateId:

'grid'

4.在Ext.Viewport中嵌入mapDiv与数据列表GridPanel

newExt.Viewport（{

id:

"mapView",

title:

'Ext.Viewport示例',

layout:

'border',//表格布局

items:

[{title:

'northPanel',html:

'上边',

region:

'north',height:

100

},{title:

'坐标信息列表',collapsible:

true,

region:

'west',width:

300,layout:

'fit',

items:

[gridPanel]

},{

id:

'myMap',title:

'地图',

html:

strHtml,region:

'center'}

]}）;

2.2.2在Ext中显示XX地图

1、添加加载地图的代码

functioninitializeMap（）

{map=newBMap.Map（"mapDiv"）;//创建Map实例

varpoint1=newBMap.Point（116.404,39.915）;

map.centerAndZoom（point1,12）;}

2．调用initializeMap（）方法

newExt.onReady（function（）

{

.....

.....

initializeMap（）;

}）;

注：

此处需要注意initializeMap（）方法的位置，一定要写在newExt.onReady方法体内，不然浏览器会无法将XX地图加载到mapDiv中，程序会出现异常。

2.3向地图添加标注

通过鼠标左键点击地图，并在点击的坐标点上添加一个图像标注。

1.首先为地图添加一个click事件响应。

为地图添加一个click事件监听，并取得当前点击的坐标，通过这个坐标创建一个Marker，map.addOverlay方法将Marker添加到地图上。

map.addEventListener（"click",function（e）

{

varmarker=newBMap.Marker（e.point）;

map.addOverlay（marker）;

....

....

}

2.获取标注的坐标值。

通过参数e的point属性获得地理坐标点。

其中e.point.lng可以获取经度值，e.point.lat可以获取纬度值。

3.将添加的标注坐标信息存入到GridPanel中。

先创建一条record记录，然后通过store.add方法存入到store中。

varr=newrecord_Point（{

point_id:

storeIndex,

name:

storeIndex,

lat:

e.point.lat,

lng:

e.point.lng

}）;

store.add（r）;

完成以上两部分代码后，每次在地图上点击鼠标左键的同时会添加一个标注，并将标注的坐标信息存入到浏览器的左边列表中。

2.4为标注添加信息窗口

信息窗口在地图上方的浮动显示HTML内容。

信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

您可以使用BMap.InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。

程序运行结果：

1.为标注添加click事件监听。

创建信息窗口对象

//添加标注click事件监听

marker.addEventListener（"click",function（e2）

{}

2.创建一个信息窗口对象

varinfoWindowOpts=

{

width:

250,//信息窗口宽度

height:

100,//信息窗口高度

title:

"Hello"//信息窗口标题

}

//创建信息窗口对象

varinfoWindow=newBMap.InfoWindow（"I'm"+rindex+"marker",infoWindowOpts）;

3.使用标注打开信息窗口，并将地图的中心点设置该标准的坐标点。

marker.openInfoWindow（infoWindow）;

map.centerAndZoom（e2.point,map.getZoom（））;

2.5标注与数据列表的联动

实现当点击某个标注时，其对应的数据列表的行会被选中。

程序运行结果：

1.在标注的click事件中添加gridPanel的selectRow方法。

marker.addEventListener（"click",function（e2）

{

......

gridPanel.getSelectionModel（）.selectRow（rindex-1）;

}）;

2.6数据列表与标注的联动

当选中数据列表中的某条记录时，将地图平移至该记录所对应的标注处，并且该标注会弹出信息窗口。

程序运行结果：

1.为GridPanel添加一个rowclick事件监听。

gridPanel.addListener（'rowclick',panelRowSelect）;

2.添加panelRowSelect函数。

通过gird参数可以获取girdPaenl的record对象，再使用record获取数据。

gridPanel.addListener（'rowclick',panelRowSelect）;

//gridPanel行选择事件函数

functionpanelRowSelect（grid,rowIndex,e）

{

//返回选区中的第一个记录Record

varrecord=grid.getSelectionModel（）.getSelected（）;

//创建信息窗口对象

varinfoW=newBMap.InfoWindow（"I'm"+record.get（'name'）+"marker",infoWindowOpts）;}

3.获得标注的坐标，让标注打开信息窗口，并将地图中心位置移动到标注的位置。

functionpanelRowSelect（grid,rowIndex,e）

{

.......

.......

varpt2=newBMap.Point（record.get（'lng'）,record.get（'lat'））;

markerList[rowIndex].openInfoWindow（infoW）;map.centerAndZoom（pt2,map.getZoom（））;

}

2.7创建可拖拽的标注

标注是可以点击和拖动到新位置的交互式对象。

varmap = 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）;

marker.enableDragging（true）;    // 设置标注可拖拽

3折线

BMap.Polyline对象表示地图上的折线覆盖物。

它包含一组点，并将这些点连接起来形成折线。

折线在地图上绘制为一系列直线段。

可以自定义这些线段的颜色、粗细和透明度。

颜色可以是十六进制数字形式（比如：

#ff0000）或者是颜色关键字（比如：

red）。

BMap.Polyline对象需要浏览器支持矢量绘制功能。

在InternetExplorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。

以下代码段会在两点之间创建6像素宽的蓝色折线：

var polyline = new BMap.Polyline（[  

    new BMap.Point（116.399, 39.910）,  

    new BMap.Point（116.405, 39.920）  

  ],    

{strokeColor:

"blue", strokeWeight:

6, strokeOpacity:

0.5}  

）;  

map.addOverlay（polyline）; 

程序运行结果：

3.1添加多边形

这里介绍使用Polyline类向地图添加多边形，使用Polyline绘制多边形的原理是向地图添加N个坐标点，N>=3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。

程序运行结果：

varmap=newBMap.Map（"container"）;

varpoint=newBMap.Point（116.4674377441400,39.7895443931116）;

map.centerAndZoom（point,10）;

varpolyline=newBMap.Polyline（[

newBMap.Point（116.3960266113280,40.0192013076867）,

newBMap.Point（116.4578247070310,40.0128907795261）,

newBMap.Point（116.5045166015620,39.9929035908019）,

newBMap.Point（116.5457153320310,39.9371189329902）,

newBMap.Point（116.5443420410150,39.9044690755304）,

newBMap.Point（116.5498352050780,39.8623172262438）,