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

资源描述

百度地图说明文档 1.界面展示界面整体分为4部分，主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。主地图显示区用于除测距以外的功能显示，鼠标测距地图区只用于鼠标测距，结果面板区显示部分查询结果。功能实现包括基本操作功能：鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距，其他功能有（1）定位查询（输入经纬度坐标在图上查询具体位置）（2）经纬度坐标获取（鼠标点击获取图上经纬度坐标）（3）快速查询（不同行政区级别点击查询缩放到当前位置，通过城市定位和关键字提示实现）（4）关键词查询（输入查询内容将查询结果显示到控制面板和图上）（5）覆盖物叠加（点击按钮将覆盖物添加到图上）（6）删除覆盖物（点击按钮删除覆盖物，包括关键字查询、路线查询在图上显示的覆盖物，用于清除查询结果，便于二次查询）（7）信息窗口（点击图上点覆盖物弹出信息窗口）（8）地址解析/逆解析、添加点线面（直接选用工具条上按钮进行绘制）（9）编辑功能（点击按钮开启/关闭编辑）（10）获取绘制的覆盖物个数，清除所有覆盖物（11）步行路线规划（包括地图上显示和结果面板显示）（12）驾车路线规划（信息窗口显示驾车所需时间和行驶距离，地图和结果面板显示路线）（13）公交车和地铁路线查询（输入公交车或地铁号，在结果面板显示经过的站点及发车信息）（14）公交车出行路线规划（地图上显示路线）（15）输入时关键字提示（16）右下角打开路况提示以下为部分功能实现效果截图关键字查询（结果显示在地图上）关键字查询结果显示在结果面板步行路线规划驾车路线规划公交车和地铁路线站点查询，结果显示在查询面板公交路线规划 2.框架界面先分成左右两部分，container1、container2分别占70%和30%，左侧上部为主地图allmap占70%，下部按钮输入区container3占30%，右侧鼠标测距区allmap1占30%，结果面板r-result占70%。 #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} //主地图 #allmap1{margin:0 0 3px;height:30%;} //鼠标测距地图 #r-result{margin:0 0 3px;height:70%;} 3.关于未实现的功能点击折线、多边形显示信息窗口，点（marker类）覆盖物有打开/关闭信息窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折线和多边形（Polyline类和Polygon类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法getPath()返回值为Array<Point>，然而实施过程中，无法获取到点数组，因此无法继续进行。获取点线面的坐标以及编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据百度地图API中的示例DEMO将提示窗的信息存储到文本框。附代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} #allmap1{margin:0 0 3px;height:30%;} #r-result{margin:0 0 3px;height:70%;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src=" <script type="text/javascript" src=" <script type="text/javascript" src=" <script src=" <script type="text/javascript" src=" <link href=" rel="stylesheet" type="text/css" />  <script type="text/javascript" src=" <link rel="stylesheet" href=" />  <script type="text/javascript" src=" <link rel="stylesheet" href=" /> <title>贾明瑞百度地图</title> </head> <body> <div id="container1"> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> </div> <div id="container3"> <p> <input type="button" onClick="add_control1();" value="显示工具条" /> <input type="button" onClick="delete_control1();" value="隐藏工具条" /> <input type="button" onClick="add_control2();" value="显示地图类型缩略图" /> <input type="button" onClick="delete_control2();" value="隐藏地图类型缩略图" /> <input type="button" onClick="fanwei();" value="获取地图显示范围" /> <input type="button" onClick="distance();" value="打开鼠标测距" /> <input type="button" onClick="distance();" value="关闭鼠标测距" /> <input type="button" onClick="quantu();" value="全图" /> </p> <p> 经度: <input id="longitude" type="text" size="8" /> 纬度: <input id="latitude" type="text" size="8" /> <input type="button" value="坐标定位" onClick="theLocation1()" /> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="城市定位" onClick="theLocation2()" /> <input type="button" value="获取经纬度" onClick="zuobiao()" /> <input type="text" name="dizhi" id="dizhi" width="90px" > <input type="button" onClick="dizhijiexi();" value="地址解析" /> <input type="button" onClick="nidizhijiexi();" value="逆地址解析" /> <p> <input type="button" onClick="add_overlay();" value="添加覆盖物" /> <input type="button" onClick="remove_overlay();" value="删除覆盖物" /> <input type="button" value="开始编辑"onclick = "marker.enableDragging();polyline.enableEditing();polygon.enableEditing();"/> <input type="button" value="停止编辑"onclick = "marker.disableDragging();polyline.disableEditing();polygon.disableEditing();"/> <input type="button" value="获取绘制的覆盖物个数" onClick="alert(overlays.length)"/> <input type="button" value="清除所有覆盖物" onClick="clearAll()"/> <input type="text" name="textfield" id="textfield" > <input name="button" type="submit" id="button" onClick="search2() " value="关键字查询"> <input name="button" type="submit" id="button" onClick="search1() " value="查询面板"> </p> <p> <input type="text" id="start_point" size="12" > <input type="text" id="end_point" size="12" > <input type="button" id="result1" onClick="walk1() " value="步行路线规划" /> <input type="button" id="result2" onClick="walk2() " value="步行路线面板" /> <input type="text" id="sop" size="12" > <input type="text" id="eop" size="12" > <input type="button" id="result1" onClick="drive1() " value="驾车距离与时间" /> <input type="button" id="result2" onClick="drive2() " value="驾车路线面板" /> </p> <p> <label>输入公交地铁编号</label><input type="text" name="bus" id="bus" > <input name="button2" type="submit" id="button2" onClick="search3() " value="公交地铁站点查询"> <select> <option value="0">最少时间</option> <option value="1">最少换乘</option> <option value="2">最少步行</option> <option value="3">不乘地铁</option> </select> <input type="text" id="start" size="12" > <input type="text" id="end" size="12" > <input type="button" id="result" onClick="search() " value="公交路线查询" /> </p> </div> </div> <div id="container2"> <div id="allmap1"></div> <p>请输入:<input type="text" id="suggestId" size="12" value="" style="width:150px;" />关键字提示</p> <div id="r-result"></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('map'); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 10); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); //绘制覆盖物获取数量及清除覆盖物 var overlays = []; var overlaycomplete = function(e){ overlays.push(e.overlay); }; var styleOptions = { 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, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 }, circleOptions: styleOptions, //圆的样式 polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } 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, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线 var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆 var polygon = new BMap.Polygon([ new BMap.Point(116.387112,39.920977), 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,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("天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门"); // 创建信息窗口对象 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow1); //开启信息窗口 }); //添加覆盖物 function add_overlay () { map.addOverlay(marker); //增加点 map.addOverlay(polyline); //增加折线 map.addOverlay(circle); //增加圆 map.addOverlay(polygon); //增加多边形 map.addOverlay(rectangle); //增加矩形 } //清除覆盖物 function remove_overlay(){ map.clearOverlays(); } //地址解析 function dizhijiexi() { var dizhi=document.getElementById("dizhi").value; var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint(dizhi, function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市"); } //逆地址解析 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.district + ", " + 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_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(){ map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation); } //移除控件和比例尺 function delete_control1(){ map.removeControl(top_left_control); map.removeControl(top_left_navigation); map.removeControl(top_right_navigation); } //添加地图类型和缩略图 function add_control2(){ map.addControl(mapType1); //2D图，卫星图 map.addControl(mapType2); //左上角，默认地图控件 map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦 map.addControl(overView); //添加默认缩略地图控件 map.addControl(overViewOpen); //右下角，打开 } //移除地图类型和缩略图 function delete_control2(){ map.removeControl(mapType1); //移除2D图，卫星图 map.removeControl(mapType2); map.removeControl(overView); map.removeControl(overViewOpen); } //是否显示路况提示面板 var ctrl = new BMapLib.TrafficControl({ showPanel: false //是否显示路况提示面板 }); map.addControl(ctrl); ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); //获取地图显示范围 function fanwei() { var bs = map.getBounds(); //获取可视区域 var bssw = bs.getSouthWest(); //可视区域左下角 var bsne = bs.getNorthEast(); //可视区域右上角 alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat); } map.enableContinuousZoom(); var size = new BMap.Size(10, 20); map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市之间事件 // onChangeBefore: function(){ // alert('before'); // }, // 切换城市之后事件 // onChangeAfter:function(){ // alert('after'); // } })); //鼠标测距 function distance() { var map = new BMap.Map("allmap1"); map.centerAndZoom("北京",12); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); var myDis = new BMapLib.DistanceTool(map); map.addEventListener("load",function(){ myDis.open(); //开启鼠标测距 }); } function close_distance() { var map = new BMap.Map("allmap1"); map.centerAndZoom("北京",12); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); var myDis = new BMapLib.DistanceTool(map); map.addEventListener("load",function(){ myDis.close(); //关闭鼠标测距 }); } //全图 function quantu() { setTimeout(function(){map.panTo(new BMap.Point(116.4035,39.915)); }); setTimeout(function(){map.setZoom(5)}); map.enableScrollWheelZoom(true); } //经纬度定位 function theLocation1(){ if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){ map.clearOverlays(); var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.panTo(new_point); } } //城市定位 function theLocation2(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,10); // 用城市名设置地图中心点 } } //获取经纬度 fun

展开阅读全文