百度地图开发说明文档.doc

1、百度地图说明文档1.界面展示界面整体分为 4 部分，主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。主地图显示区用于除测距以外的功能显示，鼠标测距地图区只用于鼠标测距，结果面板区显示部分查询结果。功能实现包括基本操作功能：鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距，其他功能有（1） 定位查询（输入经纬度坐标在图上查询具体位置）（2） 经纬度坐标获取（鼠标点击获取图上经纬度坐标）（3） 快速查询（不同行政区级别点击查询缩放到当前位置，通过城市定位和关键字提示实现）（4） 关键词查询（输入查询内容将查询结果显示到控制面板和图上）（5） 覆盖物叠加（点击按钮将覆盖物添加到图上

2、）（6） 删除覆盖物（点击按钮删除覆盖物，包括关键字查询、路线查询在图上显示的覆盖物，用于清除查询结果，便于二次查询）（7） 信息窗口（点击图上点覆盖物弹出信息窗口）（8） 地址解析/逆解析、添加点线面（直接选用工具条上按钮进行绘制）（9） 编辑功能（点击按钮开启/关闭编辑）（10） 获取绘制的覆盖物个数，清除所有覆盖物（11） 步行路线规划（包括地图上显示和结果面板显示）（12） 驾车路线规划（信息窗口显示驾车所需时间和行驶距离，地图和结果面板显示路线）（13） 公交车和地铁路线查询（输入公交车或地铁号，在结果面板显示经过的站点及发车信息）（14） 公交车出行路线规划（地图上显示路线）（15

3、） 输入时关键字提示（16） 右下角打开路况提示以下为部分功能实现效果截图1关键字查询（结果显示在地图上）关键字查询结果显示在结果面板步行路线规划2驾车路线规划公交车和地铁路线站点查询，结果显示在查询面板公交路线规划32.框架界面先分成左右两部分，container1、container2 分别占 70%和 30%，左侧上部为主地图allmap 占 70%，下部按钮输入区 container3 占 30%，右侧鼠标测距区 allmap1 占 30%，结果面板 r-result 占 70%。#container1width:70%;height:100%;float:left;overflow:

4、 hidden;margin:0;#container2width:30%;height:100%;float:left;overflow: hidden;margin:0;#container3width:100%;height:30%;float:left;overflow: hidden;margin:0;#allmapmargin:0 0 3px;height:70%; /主地图#allmap1margin:0 0 3px;height:30%; /鼠标测距地图#r-resultmargin:0 0 3px;height:70%;3.关于未实现的功能点击折线、多边形显示信息窗口，点（m

5、arker 类）覆盖物有打开/ 关闭信息窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折线和多边形（Polyline类和 Polygon 类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法 getPath()返回值为 Array，然而实施过程中，无法获取到点数组，因此无法继续进行。获取点线面的坐标以及编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据百度地图 API 中的示例 DEMO 将提示窗的信息存储到文本框。附代码：4body, htmlwidth: 100%;height: 100%;margin

6、:0;font-family:“微软雅黑“;#container1width:70%;height:100%;float:left;overflow: hidden;margin:0;#container2width:30%;height:100%;float:left;overflow: hidden;margin:0;#container3width:100%;height:30%;float:left;overflow: hidden;margin:0;#allmapmargin:0 0 3px;height:70%;#allmap1margin:0 0 3px;height:30%;#

7、r-resultmargin:0 0 3px;height:70%;dl,dt,dd,ul,limargin:0;padding:0;list-style:none;pfont-size:12px;dtfont-size:14px;font-family:“微软雅黑“;font-weight:bold;border-bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;ddpadding:5px 0 0 5px;liline-height:28px;贾明瑞百度地图 经度: 纬度: 城市名: 6输入公交地铁编号 最少时间最少换乘最少步

8、行不乘地铁请输入 :关键字提示/ 百度地图 API 功能var map = new BMap.Map(map);var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 10); 7map.enableScrollWheelZoom(true);map.enableInertialDragging(true);/绘制覆盖物获取数量及清除覆盖物var overlays = ;var overlaycomplete = function(e)overlays.push(e.overlay);var styleOptio

9、ns = strokeColor:“red“, /边线颜色。fillColor:“red“, /填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, /边线的宽度，以像素为单位。strokeOpacity: 0.8, /边线透明度，取值范围 0 - 1。fillOpacity: 0.6, /填充的透明度，取值范围 0 - 1。strokeStyle: solid /边线的样式，solid 或 dashed。/实例化鼠标绘制工具var drawingManager = new BMapLib.DrawingManager(map, isOpen: false, /是否开启

10、绘制模式enableDrawingTool: true, /是否显示工具栏drawingToolOptions: anchor: BMAP_ANCHOR_TOP_RIGHT, /位置offset: new BMap.Size(5, 5), /偏离值,circleOptions: styleOptions, /圆的样式polylineOptions: styleOptions, /线的样式polygonOptions: styleOptions, /多边形的样式rectangleOptions: styleOptions /矩形的样式); /添加鼠标绘制工具监听事件，用于获取绘制结果drawin

11、gManager.addEventListener(overlaycomplete, overlaycomplete);function clearAll() for(var i = 0; i overlays.length; i+)map.removeOverlay(overlaysi);overlays.length = 0 /添加覆盖物 删除覆盖物var marker = new BMap.Marker(new BMap.Point(116.404, 39.915); / 创建点var polyline = new BMap.Polyline(new BMap.Point(116.399

12、, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900), strokeColor:“blue“, strokeWeight:2, strokeOpacity:0.5); /创建折线8var circle = new BMap.Circle(point,500,strokeColor:“blue“, strokeWeight:2, strokeOpacity:0.5); /创建圆var polygon = new BMap.Polygon(new BMap.Point(116.387112,39.9209

13、77),new BMap.Point(116.385243,39.913063),new BMap.Point(116.394226,39.917988),new BMap.Point(116.401772,39.921364),new BMap.Point(116.41248,39.927893), strokeColor:“blue“, strokeWeight:2, strokeOpacity:0.5); /创建多边形var pStart = new BMap.Point(116.392214,39.918985);var pEnd = new BMap.Point(116.41478,

14、39.911901);var rectangle = new BMap.Polygon(new BMap.Point(pStart.lng,pStart.lat),new BMap.Point(pEnd.lng,pStart.lat),new BMap.Point(pEnd.lng,pEnd.lat),new BMap.Point(pStart.lng,pEnd.lat), strokeColor:“blue“, strokeWeight:2, strokeOpacity:0.5); /创建矩形var infoWindow1 = new BMap.InfoWindow(“天安门坐落在中国北京市

15、中心, 故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门“); / 创建信息窗口对象 marker.addEventListener(“click“, function() this.openInfoWindow(infoWindow1); /开启信息窗口);/添加覆盖物function add_overlay ()map.addOverlay(marker); /增加点map.addOverlay(polyline); /增加折线map.addOverlay(circle); /增加圆map.addOverlay(polygon); /增加多边形map.addOverlay(recta

16、ngle); /增加矩形/清除覆盖物function remove_overlay()map.clearOverlays(); /地址解析function dizhijiexi()var dizhi=document.getElementById(“dizhi“).value;var myGeo = new BMap.Geocoder();9/ 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(dizhi, function(point)if (point) map.centerAndZoom(point, 16);map.addOverlay(new BMap.Mark

17、er(point);elsealert(“您选择地址没有解析到结果!“);, “北京市“);/逆地址解析function nidizhijiexi()var geoc = new BMap.Geocoder(); map.addEventListener(“click“, function(e) var pt = e.point;geoc.getLocation(pt, function(rs)var addComp = rs.addressComponents;alert(addComp.province + “, “ + addComp.city + “, “ + addComp.dist

18、rict + “, “ + addComp.street + “, “ + addComp.streetNumber);); ); /添加控件和比例定义var top_left_control = new BMap.ScaleControl(anchor: BMAP_ANCHOR_TOP_LEFT);/ 左上角，添加比例尺var top_left_navigation = new BMap.NavigationControl(); /左上角，添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl(anchor: BMAP_

19、ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL); /右上角，仅包含平移和缩放按钮/*缩放控件 type 有四种类型:BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM ：仅包含缩放按钮*/var mapType1 = new BMap.MapTypeControl(mapTypes: BMAP_NORMAL_MAP,BMAP_HYBRID_MAP);var mapType2 = new BMap.MapTypeControl(anchor: BMAP_ANCHOR_TOP_LEFT);var overView = new BMap.OverviewMapControl();var overViewOpen = new BMap.OverviewMapControl(isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT);/添加控件和比例尺function add_control1()