百度地图开发说明文档_第1页
百度地图开发说明文档_第2页
百度地图开发说明文档_第3页
百度地图开发说明文档_第4页
百度地图开发说明文档_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

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

4、ontainer2width: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.关于未实现的功能点击折线、多边形显示信息窗口，点（marker类）覆盖物有打开/关闭信息

5、窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折线和多边形（Polyline类和Polygon类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法getPath()返回值为Array<Point>，然而实施过程中，无法获取到点数组，因此无法继续进行。获取点线面的坐标以与编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据百度地图API中的示例DEMO将提示窗的信息存储到文本框。附代码：<html><head><meta -equiv="Content-Typ

6、e" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, htmlwidth: 100%;height: 100%;margin:0;font-family:"微软雅黑"#container1width:70%;height:100%;fl

7、oat: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%;#r-resultmargin:0 0 3px;height:70%;dl,dt,dd,ul,limargin:0

8、;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;</style><script type="text/javascript" src="api.map.baidu./api?v=

9、2.0&ak=v7sMlv2WgtkHj0i7gq7FoVZwc8UnXkVv"></script> <script type="text/javascript" src="api.map.baidu./api?v=1.2"></script> <script type="text/javascript" src="api.map.baidu./library/DistanceTool/1.2/src/DistanceTool_min.js">

10、</script> <script src="libs.baidu./jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="api.map.baidu./library/TrafficControl/1.4/src/TrafficControl_min.js"></script> <link href="api.map.baidu./library/TrafficContro

11、l/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /><!-加载鼠标绘制工具-><script type="text/javascript" src="api.map.baidu./library/DrawingManager/1.4/src/DrawingManager_min.js"></script><link rel="stylesheet" hr

12、ef="api.map.baidu./library/DrawingManager/1.4/src/DrawingManager_min.css" /><!-加载检索信息窗口-><script type="text/javascript" src="api.map.baidu./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href=&

13、quot;api.map.baidu./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /><title>贾明瑞百度地图</title></head><body><div id="container1"><div id="allmap" style="overflow:hidden;zoom:1;position:relative;"><div id="map&q

14、uot; 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

15、="button" onClick="delete_control1();" value="隐藏工具条" /> <input type="button" onClick="add_control2();" value="显示地图类型缩略图" /> <input type="button" onClick="delete_control2();" value="隐藏地图类型缩略图" />

16、<input type="button" onClick="fanwei();" value="获取地图显示围" /> <input type="button" onClick="distance();" value="打开鼠标测距" /> <input type="button" onClick="distance();" value="关闭鼠标测距" /> <input

17、type="button" onClick="quantu();" value="全图" /> </p> <p> 经度: <input id="longitude" type="text" size="8" />纬度: <input id="latitude" type="text" size="8" /><input type="button&q

18、uot; value="坐标定位" onClick="theLocation1()" /> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /><input type="button" value="城市定位" onClick="theLocation2()" /> <input type=&q

19、uot;button" value="获取经纬度" onClick="zuobiao()" /> <input type="text" name="dizhi" id="dizhi" width="90px" > <input type="button" onClick="dizhijiexi();" value="地址解析" /> <input type="b

20、utton" onClick="nidizhijiexi();" value="逆地址解析" /> <p><input type="button" onClick="add_overlay();" value="添加覆盖物" /> <input type="button" onClick="remove_overlay();" value="删除覆盖物" /> <input ty

21、pe="button" value="开始编辑"onclick = "marker.enableDragging();polyline.enableEditing();polygon.enableEditing();"/><input type="button" value="停止编辑"onclick = "marker.disableDragging();polyline.disableEditing();polygon.disableEditing();"/&

22、gt; <input type="button" value="获取绘制的覆盖物个数" onClick="alert(overlays.length)"/><input type="button" value="清除所有覆盖物" onClick="clearAll()"/> <input type="text" name="textfield" id="textfield" > &

23、lt;input name="button" type="submit" id="button" onClick="search2() " value="关键字查询"> <input name="button" type="submit" id="button" onClick="search1() " value="查询面板"> </p> <p> <

24、;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="

25、;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&

26、quot; onClick="drive1() " value="驾车距离与时间" /> <input type="button" id="result2" onClick="drive2() " value="驾车路线面板" /> </p> <p> <label>输入公交地铁编号</label><input type="text" name="bus" id=&q

27、uot;bus" > <input name="button2" type="submit" id="button2" onClick="search3() " value="公交地铁站点查询"> <select> <option value="0">最少时间</option> <option value="1">最少换乘</option> <option val

28、ue="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

29、="result" onClick="search() " value="公交路线查询" /></p></div></div><div id="container2"> <div id="allmap1"></div> <p>请输入:<input type="text" id="suggestId" size="12" value="

30、;" 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"

31、;>/ 百度地图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 styleO

32、ptions = strokeColor:"red", /边线颜色。 fillColor:"red", /填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, /边线的宽度，以像素为单位。 strokeOpacity: 0.8, /边线透明度，取值围0 - 1。 fillOpacity: 0.6, /填充的透明度，取值围0 - 1。 strokeStyle: 'solid' /边线的样式，solid或dashed。 /实例化鼠标绘制工具 var drawingManager = new BMapLib.Drawi

33、ngManager(map, isOpen: false, /是否开启绘制模式 enableDrawingTool: true, /是否显示工具栏 drawingToolOptions: anchor: BMAP_ANCHOR_TOP_RIGHT, /位置 offset: new BMap.Size(5, 5), /偏离值 , circleOptions: styleOptions, /圆的样式 polylineOptions: styleOptions, /线的样式 polygonOptions: styleOptions, /多边形的样式 rectangleOptions: styleOp

34、tions /矩形的样式 ); /添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.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

35、); / 创建点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, stroke

36、Opacity: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);

37、/创建多边形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:"b

38、lue", strokeWeight:2, strokeOpacity:0.5); /创建矩形var infoWindow1 = new BMap.InfoWindow("天安门坐落在中国市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门"); / 创建信息窗口对象 marker.addEventListener("click", function() this.openInfoWindow(infoWindow1); /开启信息窗口);/添加覆盖物function add_overlay ()map.addOverlay(mark

39、er); /增加点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();

40、/ 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(dizhi, function(point)if (point) map.centerAndZoom(point, 16);map.addOverlay(new BMap.Marker(point);elsealert("您选择地址没有解析到结果!");, "市");/逆地址解析function nidizhijiexi()var geoc = new BMap.Geocoder(); map.addEventListener("click", functio

41、n(e) var pt = e.point;geoc.getLocation(pt, function(rs)var addComp = rs.addressComponents;alert(addCvince + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);); ); /添加控件和比例定义var top_left_control = new B

42、Map.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_C

43、ONTROL_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 ov

44、erViewOpen = 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);

45、 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

46、); /右下角，打开/移除地图类型和缩略图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_ANCHO

47、R_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();

48、 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 BM

49、ap.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("allm

50、ap1"); 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

51、,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 = n

52、ew 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("cityNam

53、e").value;if(city != "")map.centerAndZoom(city,10); / 用城市名设置地图中心点/获取经纬度function zuobiao()map.addEventListener("click",function(e)alert(e.point.lng + "," + e.point.lat););/关键词查询function search1()var KeyWord=document.getElementById("textfield").value; var l

54、ocal = new BMap.LocalSearch(map, renderOptions: map: map, panel: "r-result");local.search(KeyWord);function search2()var KeyWord=document.getElementById("textfield").value;var local = new BMap.LocalSearch(map, renderOptions:map: map);local.search(KeyWord);/公交地铁查询function search3(

55、)var busline = new BMap.BusLineSearch(map,renderOptions:map:map,panel:"r-result",onGetBusListComplete: function(result) if(result) var fstLine = result.getBusListItem(0);/获取第一个公交列表显示到map上 busline.getBusLine(fstLine); );function busSearch()var busName =document.getElementById("bus"

56、;).value;busline.getBusList(busName);setTimeout(function()busSearch();,1500);/公交路线查询 function search() var start = document.getElementById("start").value;var end = document.getElementById("end").value;var routePolicy = BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRAN

57、SFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS;var transit = new BMap.TransitRoute(map, renderOptions: map: map,policy: 0);$("#result").click(function()map.clearOverlays(); var i=$("#driving_way select").val();search(start,end,routePolicyi); function sea

58、rch(start,end,route) transit.setPolicy(route);transit.search(start,end););/步行路线规划function walk1()var start_point = document.getElementById("start_point").value;var end_point = document.getElementById("end_point").value;var walking = new BMap.WalkingRoute(map, renderOptions:map: m

59、ap, autoViewport: true);walking.search(start_point, end_point);function walk2()var start_point = document.getElementById("start_point").value;var end_point = document.getElementById("end_point").value;var walking = new BMap.WalkingRoute(map, renderOptions: map: map, panel: "

60、r-result", autoViewport: true);walking.search(start_point, end_point);/驾车路线规划function drive1() var sop = document.getElementById("sop").value;var eop = document.getElementById("eop").value;var output = "从"+sop+"到"+eop+"驾车需要"var searchComplete = function (results)if (transit.getStatus() != BMAP_STATUS_SUCCESS)return ;var plan = results.getPlan(0);output += plan.getDuration(true) + "n" /获取时间output += "总路程为：" ;output += plan.getDistance(true) + "n" /获取距离var transit = new BMap.

人人文库> 全部分类> 应用文书 > 产品手册

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论