百度地圖開發(fā)說明文檔_第1頁
百度地圖開發(fā)說明文檔_第2頁
百度地圖開發(fā)說明文檔_第3頁
百度地圖開發(fā)說明文檔_第4頁
百度地圖開發(fā)說明文檔_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、 百度地圖說明文檔1.界面展示界面整體分為4部分，主地圖顯示區(qū)、鼠標(biāo)測距地圖區(qū)、按鈕與輸入?yún)^(qū)、結(jié)果面板區(qū)。主地圖顯示區(qū)用于除測距以外的功能顯示，鼠標(biāo)測距地圖區(qū)只用于鼠標(biāo)測距，結(jié)果面板區(qū)顯示部分查詢結(jié)果。功能實(shí)現(xiàn)包括基本操作功能：鼠標(biāo)滾輪放大、縮小、全圖、拖拽平移、衛(wèi)星地圖切換、鼠標(biāo)測距，其他功能有（1） 定位查詢（輸入經(jīng)緯度坐標(biāo)在圖上查詢具體位置）（2） 經(jīng)緯度坐標(biāo)獲?。ㄊ髽?biāo)點(diǎn)擊獲取圖上經(jīng)緯度坐標(biāo)）（3） 快速查詢（不同行政區(qū)級別點(diǎn)擊查詢縮放到當(dāng)前位置，通過城市定位和關(guān)鍵字提示實(shí)現(xiàn)）（4） 關(guān)鍵詞查詢（輸入查詢?nèi)輰⒉樵兘Y(jié)果顯示到控制面板和圖上）（5） 覆蓋物疊加（點(diǎn)擊按鈕將覆蓋物添加到圖上）（

2、6） 刪除覆蓋物（點(diǎn)擊按鈕刪除覆蓋物，包括關(guān)鍵字查詢、路線查詢在圖上顯示的覆蓋物，用于清除查詢結(jié)果，便于二次查詢）（7） 信息窗口（點(diǎn)擊圖上點(diǎn)覆蓋物彈出信息窗口）（8） 地址解析/逆解析、添加點(diǎn)線面（直接選用工具條上按鈕進(jìn)行繪制）（9） 編輯功能（點(diǎn)擊按鈕開啟/關(guān)閉編輯）（10） 獲取繪制的覆蓋物個(gè)數(shù)，清除所有覆蓋物（11） 步行路線規(guī)劃（包括地圖上顯示和結(jié)果面板顯示）（12） 駕車路線規(guī)劃（信息窗口顯示駕車所需時(shí)間和行駛距離，地圖和結(jié)果面板顯示路線）（13） 公交車和地鐵路線查詢（輸入公交車或地鐵號，在結(jié)果面板顯示經(jīng)過的站點(diǎn)與發(fā)車信息）（14） 公交車出行路線規(guī)劃（地圖上顯示路線）（15）

3、輸入時(shí)關(guān)鍵字提示（16） 右下角打開路況提示以下為部分功能實(shí)現(xiàn)效果截圖關(guān)鍵字查詢（結(jié)果顯示在地圖上）關(guān)鍵字查詢結(jié)果顯示在結(jié)果面板步行路線規(guī)劃駕車路線規(guī)劃公交車和地鐵路線站點(diǎn)查詢，結(jié)果顯示在查詢面板公交路線規(guī)劃2.框架界面先分成左右兩部分，container1、container2分別占70%和30%，左側(cè)上部為主地圖allmap占70%，下部按鈕輸入?yún)^(qū)container3占30%，右側(cè)鼠標(biāo)測距區(qū)allmap1占30%，結(jié)果面板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%; /鼠標(biāo)測距地圖#r-resultmargin:0 0 3px;height:70%;3.關(guān)于未實(shí)現(xiàn)的功能點(diǎn)擊折線、多邊形顯示信息窗口，點(diǎn)（marker類）覆蓋物有打開/關(guān)閉信息

5、窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折線和多邊形（Polyline類和Polygon類）覆蓋物沒有信息窗相關(guān)方法，但是有返回折線的點(diǎn)數(shù)組的方法getPath()返回值為Array<Point>，然而實(shí)施過程中，無法獲取到點(diǎn)數(shù)組，因此無法繼續(xù)進(jìn)行。獲取點(diǎn)線面的坐標(biāo)以與編輯后的坐標(biāo)到文本框中，如果上述獲取點(diǎn)數(shù)組可以實(shí)現(xiàn)則可以根據(jù)百度地圖API中的示例DEMO將提示窗的信息存儲(chǔ)到文本框。附代碼：<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" /><!-加載鼠標(biāo)繪制工具-><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="打開鼠標(biāo)測距" /> <input type="button" onClick="distance();" value="關(guān)閉鼠標(biāo)測距" /> <input

17、type="button" onClick="quantu();" value="全圖" /> </p> <p> 經(jīng)度: <input id="longitude" type="text" size="8" />緯度: <input id="latitude" type="text" size="8" /><input type="button&q

18、uot; value="坐標(biāo)定位" 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="獲取經(jīng)緯度" 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="獲取繪制的覆蓋物個(gè)數(shù)" 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="關(guān)鍵字查詢"> <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="步行路線規(guī)劃" /> <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="駕車距離與時(shí)間" /> <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="公交地鐵站點(diǎn)查詢"> <select> <option value="0">最少時(shí)間</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;" />關(guān)鍵字提示</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);/繪制覆蓋物獲取數(shù)量與清除覆蓋物 var overlays = ;var overlaycomplete = function(e) overlays.push(e.overlay); ; var styleO

32、ptions = strokeColor:"red", /邊線顏色。 fillColor:"red", /填充顏色。當(dāng)參數(shù)為空時(shí)，圓形將沒有填充效果。 strokeWeight: 3, /邊線的寬度，以像素為單位。 strokeOpacity: 0.8, /邊線透明度，取值圍0 - 1。 fillOpacity: 0.6, /填充的透明度，取值圍0 - 1。 strokeStyle: 'solid' /邊線的樣式，solid或dashed。 /實(shí)例化鼠標(biāo)繪制工具 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 /矩形的樣式 ); /添加鼠標(biāo)繪制工具監(jiān)聽事件，用于獲取繪制結(jié)果 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、); / 創(chuàng)建點(diǎn)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); /創(chuàng)建折線var circle = new BMap.Circle(point,500,strokeColor:"blue", strokeWeight:2, stroke

36、Opacity:0.5); /創(chuàng)建圓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、/創(chuàng)建多邊形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); /創(chuàng)建矩形var infoWindow1 = new BMap.InfoWindow("天安門坐落在中國市中心,故宮的南側(cè),與天安門廣場隔長安街相望,是清朝皇城的大門"); / 創(chuàng)建信息窗口對象 marker.addEventListener("click", function() this.openInfoWindow(infoWindow1); /開啟信息窗口);/添加覆蓋物function add_overlay ()map.addOverlay(mark

39、er); /增加點(diǎn)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、/ 將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野myGeo.getPoint(dizhi, function(point)if (point) map.centerAndZoom(point, 16);map.addOverlay(new BMap.Marker(point);elsealert("您選擇地址沒有解析到結(jié)果!");, "市");/逆地址解析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(); /左上角，添加默認(rèn)縮放平移控件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圖，衛(wèi)星圖map.addControl(mapType2); /左上角，默認(rèn)地圖控件map.setCurrentCity(""); /由于有3D圖，需要設(shè)置城市哦map.addControl(overView); /添加默認(rèn)縮略地圖控件map.addControl(overViewOpen

46、); /右下角，打開/移除地圖類型和縮略圖function delete_control2()map.removeControl(mapType1); /移除2D圖，衛(wèi)星圖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(); /獲取可視區(qū)域var bssw = bs.getSouthWest(); /可視區(qū)域左下角var bsne = bs.getNorthEast(); /可視區(qū)域右上角alert("當(dāng)前地圖可視圍是：" + 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'); / ); /鼠標(biāo)測距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(); /開啟鼠標(biāo)測距);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(); /關(guān)閉鼠標(biāo)測距);/全圖function quantu()setTimeout(function()map.panTo(new BMap.Point(116.4035

51、,39.915); ); setTimeout(function()map.setZoom(5); map.enableScrollWheelZoom(true);/經(jīng)緯度定位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); / 創(chuàng)建標(biāo)注map.addOverlay(marker); / 將標(biāo)注添加到地圖中map.panTo(new_point); /城市定位function theLocation2()var city = document.getElementById("cityNam

53、e").value;if(city != "")map.centerAndZoom(city,10); / 用城市名設(shè)置地圖中心點(diǎn)/獲取經(jīng)緯度function zuobiao()map.addEventListener("click",function(e)alert(e.point.lng + "," + e.point.lat););/關(guān)鍵詞查詢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);/獲取第一個(gè)公交列表顯示到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););/步行路線規(guī)劃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);/駕車路線規(guī)劃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" /獲取時(shí)間output += "總路程為：" ;output += plan.getDistance(true) + "n" /獲取距離var transit = new BMap.

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論