mapbar地图应用程序接口使用手册之地图操作接口分册.doc

图为先应用程序接口使用手册 地图操作接口分册 北京图为先科技有限公司（） （版权所有，不得翻印） 文档维护信息文档维护信息 版本编号说明日期变更人批准日期批准人 V2.9.1 对 API 地图操作接口分册文档进行了内容 增添，包括：2007-12-27/2007-12-27/ 目录 1.概述.6 2.软件体系构架.6 3.API 使用与接口规范 .8 3.1使用示例 .8 3.1.1创建一个地图 .8 3.1.2定制自己的按钮.9 3.1.3在地图上创建 1 个标注点 POI.10 3.1.4在地图上添加 1 条折线（面）.11 3.1.5地图基本操作.12 3.1.6动态在地图上标注.15 3.1.7在地图上动态创建显示 1 个标注点 POI.16 3.1.8动态在地图上划线.18 3.1.9在地图上动态创建显示 1 条折线 .19 3.1.10事件注册与回调.21 3.1.11在地图上进行拉框查询.22 3.2类接口规范.24 3.2.1地图类 Maplet .24 3.2.1.1鹰眼地图设置属性 oo.24 3.2.1.2鼠标转轮设置属性 mw.25 3.2.1.3构造方法接口 Maplet (obj).25 3.2.1.4构造方法接口 Maplet (name).26 3.2.1.5显示地图接口 centerAndZoom (center, level);.26 3.2.1.6创建地图内控件接口 addControl (obj) .27 3.2.1.7删除地图内控件接口 removeControl (obj).27 3.2.1.8比例尺标签设置接口 showScale (scale).27 3.2.1.9逐级放大接口 zoomIn ().28 3.2.1.10逐级缩小接口 zoomOut ().28 3.2.1.11移动地图接口 panTo (x, y).28 3.2.1.12设置地图操作接口 setMode(mode) .29 3.2.1.13地图清除接口 clearOverlays (); clean ().30 3.2.1.14创建地图叠加物接口 addOverlay (overlay).30 3.2.1.15删除地图叠加物接口 removeOverlay (overlay).31 3.2.1.16设置地图中心点接口 setCenter (centerPoint).31 3.2.1.17获取地图中心点经纬度接口 getCurrentMap ().31 3.2.1.18设置地图比例尺精度接口 setZoomLevel(level).32 3.2.1.19获取地图比例尺精度接口 getZoomLevel () .32 3.2.2地图缩放控件类 MStandardControl.33 3.2.2.1标准缩放控件构造方法接口 MStandardControl ().33 3.2.2.2简化缩放控件构造方法接口 MStandardControl (undefined,undefined,undefined,1).34 3.2.3标注点 POI 类 MMarker.34 3.2.3.1构造方法接口 MMarker (point, icon, infoWindow, label).34 3.2.3.2打开标注点气泡方法接口 openInfoWindow () .35 3.2.3.3关闭标注点气泡方法接口 maplet.hideBubble().35 3.2.4坐标点类 MPoint.35 3.2.4.1坐标点标识符属性 pid.36 3.2.4.2构造方法接口 MPoint (locationId) .36 3.2.5标点标签类 MLabel .36 3.2.5.1构造方法接口 MLabe (label).37 3.2.6图标文件类 MIcon.37 3.2.6.1图标宽度属性 width .37 3.2.6.2图标高度属性 height.38 3.2.6.3图标文件 URL 属性 strURL.38 3.2.6.4构造方法接口 MIcon (URL, width, height).38 3.2.7气泡信息框类 MInfoWindow.39 3.2.7.1构造方法接口 MInofWindow ( caption, content).39 3.2.8折线类 MPolyLine.40 3.2.8.1构造方法接口 MPolyline( point1, point2, point3, . pointn , myBrush, infoWindow).40 3.2.9画笔类 MBrush.40 3.2.9.1画笔颜色属性 color .41 3.2.9.2画笔宽度属性 stroke.41 3.2.9.3是否填充多边形 fill.41 3.2.9.4多边形内部填充颜色 bgcolor.42 3.2.9.5画笔透明度属性 transparency.42 3.2.9.6多边形内部填充透明度 bgtransparency.43 3.2.9.7矢量箭头属性 arrow.43 3.2.9.8风格属性 style.43 3.2.9.9构造方法接口 MBrush (color, stroke).44 3.2.10事件类 MEvent.44 3.2.10.1构造方法接口 MEvent ().44 3.2.10.2注册对象操作事件接口 addListener( obj, eventName, callBack).45 3.2.10.3删除已注册的事件接口 removeListener( obj , eventName , callback ).45 4.附录.46 4.1对浏览器的支持情况.46 4.2地图比例尺精度.46 1. 概述 本文件是Mapbar API 使用手册 1.0的地图应用组件分册。描述说明围绕地图以及地图相关操作的 A PI 使用方法，以及 Maplet 等类的接口规范。 2. 软件体系构架 图为先地图信息服务产品软件体系结构如下分层结构： 纵向软件分层的详细内容如下图： 每一层次根据功能又会被分解为应用功能模块，对外提供的 API 在两个层面上： 用户界面层： 应用服务接口层； 俯视用户界面层功能模块如下图所示： 俯视应用服务接口层，接口模块分为如下几个范畴： 本手册提供在用户界面层有关地图操作的 API 使用与接口规范。 3. API使用与接口规范 3.1 使用示例 3.1.1 创建一个地图 在网页中嵌入一个具有具备放大、缩小、移动功能的地图。以下简单代码即可搞定。 代码 Mapbar 地图 JavaScript API 示例 var maplet; / oo: true 打开鹰眼地图；false 关闭鹰眼地图。 var oo = true; / 创建一个北京地图，地图中心为北京天安门广场，显示比例尺为第 8 级（即城市地图级别），地图 尺寸为宽 640 象素, 高 480 象素。 function init() / 页面展现初始化函数 maplet = new Maplet(myMap); / 创建一个名字为 myMap 的地图对象实例。 maplet.addControl(new MStandardControl(); / 添加地图标准缩放控件（鱼骨头）。 maplet.centerAndZoom(new MPoint(北京市),8); / 显示以北京为中心，比例尺为 8 级的地图。 代码执行图例 3.1.2 定制自己的按钮 要想在地图上自己定制操作按钮（放大、缩小、测距、移动） ，4 行代码解决问题。 程序 function init() maplet = new Maplet(myMap); maplet.centerAndZoom(new MPoint(北京市), 8); 放大 缩小 测距 移动 代码执行图例 操作说明：单击按钮，地图执行按钮提示的操作功能。 3.1.3 在地图上创建1个标注点POI 在地图上创建 1 个标注点 POI，也是几行代码的工作量。 代码 var myicon = new MMarker ( / 创建一个标注点 POI 对象实例。 new MPoint(北京市), / 定义标注点坐标中心。 new MIcon( / 配置标注点显示图标。 new MInfoWindow(名称,内容), / 定义标注点气泡信息框的标题与内容。 new MLabel(标签) / 定义标注点在地图上显示的标签名称。 ); function init() maplet = new Maplet(myMap); maplet.centerAndZoom(new MPoint(北京市), 8); maplet.addOverlay(myicon); / 将标注点 POI 添加到地图上。 代码执行图例 操作说明：单击标注点图标，界面弹出标注点气泡信息框。 3.1.4 在地图上添加1条折线（面） 在地图上划折线，也不过是几行代码的工作量。 代码 var myBrush = new MBrush(#FF0000,3); / 创建用于折线的画笔对象实例。 myBrush.fill = true; / 定义画笔是否填充线所包含的区域（面） myBrush.bgcolor = #00f; / 定义画笔填充的背景色。 myBrush.stroke = 10; / 定义画笔线粗细宽度。 var myPline = new MPolyline( / 创建 1 个折线对象实例。 new MPoint(HEJJFUXVVHCWI), / 定义折线起点坐标。 new MPoint(HERTVFXVVGWBA), / 定义折线中间点坐标。 new MPoint(HEJJFUWVVGDFI) / 定义折线终点坐标 , myBrush, / 引用画笔。 new MInfoWindow(线的名称, 线的内容) / 定义单击折线弹出的折线气泡信息框。 ); function init() maplet = new Maplet(myMap); maplet.centerAndZoom(new MPoint(北京市), 8); maplet.addOverlay(myPline); 执行代码图例 操作说明：单击折线任意点，界面弹出折线气泡信息框。 3.1.5 地图基本操作 演示在地图上定制多个支持地图基本操作功能的按钮，单击这些按钮时，执行按钮提示的操作功能。程序 看起来似乎复杂，实际很单纯，克隆 14 行代码，满足 14 中地图操作功能演示。 代码 Mapbar Map / 删除了本段格式风格定义描述内容。 var maplet; var oo = true; function init() maplet = new Maplet(mapbar); maplet.centerAndZoom(new MPoint(泉州市),8); maplet.addControl(new MStandardControl(); function getCenter() var str = maplet.getCurrentMap(); return str.substring(str.indexOf( / 地图显 示区。 中心点编码 缩放级0-13 级 当前级 别 当前中心编码 执行代码图例 操作说明：单击地图右侧按钮，完成按钮提示的地图操作。 3.1.6 动态在地图上标注 在地图上动态创建坐标点，可以参考编写如下程序。 代码 Mapbar Map / 删除了本段格式风格定义描述内容。 var maplet; var oo = true; function init() maplet = new Maplet(mapbar); maplet.centerAndZoom(new MPoint(泉州市),8); maplet.addControl(new MStandardControl(); function getPoint() / 开始标注回调函数。 maplet.setMode(bookmark,callback); / 激活地图标注功能。 function callback(strUrl) / 获取单击点坐标信息。 /reRUL.value = strUrl; /标注一个点 maplet.setMode(pan); if (strUrl.indexOf(act=add)!=-1) var begin=strUrl.indexOf(latlon=); if (begin!=-1) strUrl=strUrl.substring(begin+7); begin=strUrl.indexOf( if (begin!=-1) strUrl=strUrl.substring(0,begin); addpoint(strUrl); function addpoint(latlon) / 在地图上创建一个新坐标点对象实例。 var point = new MPoint(latlon); var icon = new MIcon( var marker = new MMarker(point, icon, null); maplet.addOverlay(marker); 执行代码图例 操作说明：单击“开始标注”按钮，然后单击地图区，则动态在地图上叠加标注点。 3.1.7 在地图上动态创建显示1个标注点POI 通过功能按钮触发，在地图上动态创建一个标注点 POI 可参考如下程序。 代码 Mapbar Map var maplet; var oo = true; function init() maplet = new Maplet(mapbar); maplet.centerAndZoom(new MPoint(泉州市),8); maplet.addControl(new MStandardControl(); function addP() / 单击按钮事件回调函数。 addPoint( , HEUIDVWVVHUEEU, 标点名称, 详 细信息); function addPoint(icon, latlon, name, detail) / 创建标注点。 maplet.clearOverlays(); / 清除地图上已有的标注点。 var point = new MPoint(latlon); / 定义标注点坐标中心。 maplet.setCenter(point); / 将地图调整为以标注点为中心。 var icon = new MIcon(icon,39,38); / 定义标注点图标文件。 var infoWindow = new MInfoWindow(name,detail); / 定义标注点的气泡信息框。 var Mlable = new MLabel(name,16,-24); / 定义标注点标签名字。 var marker = new MMarker(point,icon,infoWindow,Mlable); / 创建一个标注点对象实例。 maplet.addOverlay(marker); / 将标注点添加到地图表面。 执行代码图例 操作说明：单击“单点显示”按钮，界面显示标题为“标点名称”的标注点，单击标注点，界面弹出标注 点气泡信息框。 3.1.8 动态在地图上划线 在地图上动态连续画线，可以参考编写如下程序。 代码 Mapbar Map / 删除了本段格式风格定义描述内容。 var maplet; var oo = true; function init() maplet = new Maplet(mapbar); maplet.centerAndZoom(new MPoint(泉州市),8); maplet.addControl(new MStandardControl(); function getLine() / 开始画线回调函数。 maplet.setMode(drawline,callback); / 激活地图画线功能。 function callback(strUrl) / 画线点坐标。 reRUL.value = strUrl; 执行代码图例 注：单击“开始画线”按钮，然后单击地图区，连续在地图上画线，双击鼠标结束画线操作。 3.1.9 在地图上动态创建显示1条折线 通过功能按钮触发，在地图上动态创建 1 条折线可参考如下程序。 代码 Mapbar Map / 删除了本段格式风格定义描述内容。 var maplet; var oo = true; function init() maplet = new Maplet(mapbar); maplet.centerAndZoom(new MPoint(泉州市),8); maplet.addControl(new MStandardControl(); function addL() / 显示画线回调函数。 var str = IVTEDBZURWBAE,IVWERBZUSCDII,IWASSEZURUVBS,IVTVBHZURUBDV,IVVFCJZURWRDT,IVVFCJZURWR DT; / 预存折线折点坐标。 var strArray = str.split(,); if(strArray.length 0) / 将折点存入数组。 var lineArray = new Array(strArray.length); for(i = 0; i strArray.length; i+) lineArrayi = new MPoint(strArrayi); addLine(lineArray, 0, #FF0000, 2, 线的名称, 详细信息); / 创建 1 个折线。 function addLine(lineArray, style, color, width, name, detail) / 创建折线函数。 maplet.clearOverlays(); / 清除地图上已有折线等叠加物。 var myBrush = new MBrush(color, width); / 创建用于折线的画笔对象实例。 var infoWindow = new MInfoWindow(线的名称, 内容：线路详细信息等的 HTML 字符串文本); / 定义 折线气泡信息框。 myBrush.style = style; / 定义画笔风格。 myBrush.bgcolor = #00FF00; / 定义画笔比较颜色。 var polygon = new MPolyline( lineArray,myBrush,infoWindow); / 创建折线对象实例。 maplet.addOverlay(polygon); / 将折线对象实例添加在地图表面。 执行代码图例 操作说明：单击“线条显示”按钮，界面显示预先定义好的折线，单击折线任意点点，界面弹出折线气泡 信息框。 3.1.10事件注册与回调 使界面对象实例能够响应操作事件，例如，单击地图上一个 POI 点图标，系统能够扑捉到单击事件，并 做出响应，这需要注册对象实例的操作事件，操作事件注册很容易，2-3 行代码解决问题。 代码 var myIcon = new MMarker( / 创建一个标注点实例 myIcon。 new MPoint(北京市), new MIcon( new MInfoWindow(名称,内容), new MLabel(标签) ); function init() maplet = new Maplet(myMap); maplet.centerAndZoom(new MPoint(北京市), 8); maplet.addOverlay(myIcon); ; MEvent.addListener(myIcon, click, myFunc); / 绑定点击标注点 myIcon 事件，并执行函数 myFun c。 function myFunc() / 单击 myIcon 图标事件的回调函数。 alert(122333); / 信息提示框，显示详见以下执行代码图例。 执行代码图例 注：鼠标左键单击地图的 POI 点“标签” ，系统响应对该对象的“click”事件，弹出程序回调函数定义的 alert(122333)提示框。 3.2 类接口规范 3.2.1 地图类 Maplet 说明 提供基础地图（或称背景地图）的显示与操作功能。本组件提供强大功能，便捷、接口简单的 API，定制 不同风格的基础地图。 文件 mapbarapi.js 命名空间 Maplet 3.2.1.1 鹰眼地图设置属性 oo 用途 提供鹰眼小地图（导航小地图）与背景地图有联动同步关系，当拖拽导航地图导航框微动时，背景地图有 较大比例尺同步移动。 类型 全局属性。 属性值 属性类型定义备注 oobool 是否显示鹰眼地图oo = true/ 显示鹰眼（默认有效）。 oo = false/ 隐藏鹰眼。 返回 无。 3.2.1.2 鼠标转轮设置属性 mw 用途 激活或去活鼠标转轮缩放地图功能，鼠标转轮有效时，向前滚动鼠标转轮，放大地图、向后滚动鼠标转轮 ，缩小地图。 类型 全局属性。 属性值 属性类型定义备注 mwbool 鼠标转轮是否有效true / 鼠标转轮有效（默认有效）。 false/ 鼠标转轮无效。 返回 无。 3.2.1.3 构造方法接口 Maplet (obj) 用途 创建一个基础地图对象实例， new Maplet (obj)。 类型 Public 接口方法。 参数 形参类型定义备注 objobject div 对象div 对象。 返回 无。 3.2.1.4 构造方法接口 Maplet (name) 用途 创建一个基础地图对象实例， new Maplet (name)。 类型 Public 接口方法。 参数 形参类型定义备注 namestring div 对象名div 对象的 ID 名。 返回 无。 3.2.1.5 显示地图接口 centerAndZoom (center, level); 用途 显示中心点基础背景地图。 类型 Public 接口方法。 参数 形参类型定义备注 centerobject 中心城市例如：center = new MPoint(北京市)/ 创建地图中 心点，本例为北京。 levelint 地图精度级别默认：8 备注：地图级别，0-13，一般默