百度地圖API開發(fā)(修改)

1、大眾GIS 快速開發(fā)百度地圖API開發(fā)程鋼2015年6月19日主要內(nèi)容百度地圖APILBS開發(fā)模式Javascript API大眾版Javascript API開發(fā)綜合實例學習建議（1）百度地圖API是什么百度地圖API是一套由JavaScript語言編寫的應(yīng)用程序接口，提供各種地圖基本功能，用Javascript語言進行調(diào)用它能夠在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用。百度地圖API簡介1.百度地圖API是什么百度地圖API簡介百度地圖API簡介（2）知識準備HTMLJavascript面向?qū)ο蟪绦蜷_發(fā)地圖（3）注意事項公開地圖，國內(nèi)必須至少使用國測局制定的GCJ-02,對地理位置進行首次

2、加密。百度坐標在此基礎(chǔ)上，進行了BD-09二次加密。百度地圖API簡介（4）版本說明及申請API ak 為了統(tǒng)一平臺服務(wù)的配額管理，JavaScript API在新版本引入ak機制。v1.4及以前版本無須申請密鑰（ak），自v1.5版本開始需要先申請密鑰（ak），才可使用。 （5）地址（參數(shù)V表示加載API的版本） /api?v=1.4 /api?v=1.5&ak=您的密鑰 /申請網(wǎng)址： /user/reg主要內(nèi)容百度地圖API簡介LBS開發(fā)模式Javascript API大眾版Javascript API開發(fā)綜合實例學習建議LBS開發(fā)模式（1）Web開發(fā)使用網(wǎng)頁中嵌入地圖服務(wù)，支持2D/3D

3、、衛(wèi)星、街景、室內(nèi)實景、定制化地圖展現(xiàn)。Javascript API大眾版Javascript API極速版Javascript API極速版是專為手機瀏覽器提供的API，該版更適配移動設(shè)備，體積更小，加載地圖速度更快，更省流量。適用手機瀏覽器類型：Android自帶、UC、百度、QQ等主流瀏覽器LBS開發(fā)模式（2）服務(wù)接口 發(fā)送HTTP請求，獲取數(shù)據(jù)存儲和檢索、POI數(shù)據(jù)、地址解析、坐標轉(zhuǎn)換、IP定位、車輛網(wǎng)等服務(wù)。LBS云 通過開放服務(wù)端存儲和計算能力，提供海量位置數(shù)據(jù)存儲、檢索、展示一體化解決方案。web服務(wù)API 開發(fā)者通過http形式發(fā)起檢索請求，獲取返回json或xml格式的檢索數(shù)

4、據(jù)。用戶可以基于此開發(fā)JavaScript、C#、C+、Java等語言的地圖應(yīng)用。LBS開發(fā)模式（2）服務(wù)接口靜態(tài)圖API 發(fā)送HTTP請求訪問百度地圖靜態(tài)圖服務(wù)，便可在網(wǎng)頁上以圖片形式顯示地圖。它根據(jù)所設(shè)定的參數(shù)，通過標準HTTP協(xié)議，返回PNG格式的地圖圖片。車聯(lián)網(wǎng)API 適用車載終端應(yīng)用的開發(fā)接口，您可以在C#、C+、Java等應(yīng)用程序中使用該服務(wù)，通過發(fā)起HTTP請求方式調(diào)用百度地圖車聯(lián)網(wǎng)服務(wù)，返回檢索后的JSON或XML數(shù)據(jù)。LBS開發(fā)模式 （2）服務(wù)接口URI API 開發(fā)者只需按照接口規(guī)范構(gòu)造一條標準的URI，便可在PC和移動端瀏覽器或移動開發(fā)應(yīng)用中調(diào)起百度地圖產(chǎn)品。鷹眼 旨在為

5、LBS行業(yè)從業(yè)者，提供最貼心的位置軌跡行業(yè)解決方案。LBS開發(fā)模式（3）Android開發(fā) 使用Android平臺APP中實現(xiàn)地圖展示、信息搜索、定位、導航等功能，提供全面的LBS解決方案。Android地圖 SDK 適用于Android系統(tǒng)移動設(shè)備的地圖應(yīng)用，通過調(diào)用地圖SDK接口，可以輕松訪問百度地圖服務(wù)和數(shù)據(jù)，構(gòu)建功能豐富、交互性強的地圖類應(yīng)用程序。 Android定位SDK 為Android移動端應(yīng)用提供的一套簡單易用的LBS定位服務(wù)接口，可以輕松為應(yīng)用程序?qū)崿F(xiàn)智能、精準、高效的定位功能。LBS開發(fā)模式（3）Android開發(fā)Andriod 導航 SDK為Android移動端應(yīng)用提供了

6、一套簡單易用的導航服務(wù)接口，可以為應(yīng)用程序?qū)崿F(xiàn)專業(yè)、高效、精準的導航功能Android全景SDK 是為Android移動平臺提供的一套全景圖服務(wù)接口，提供全景圖的檢索、顯示和交互功能。 LBS開發(fā)模式（4）IOS開發(fā) 適用iOS移動設(shè)備應(yīng)用中實現(xiàn)地圖展示、POI搜索、導航等功能，搭建專業(yè)LBS類應(yīng)用。iOS地圖SDKiOS導航SDKiOS全景SDK主要內(nèi)容百度地圖API簡介LBS開發(fā)模式Javascript API大眾版Javascript API開發(fā)綜合實例學習建議Javascript API大眾版功能介紹基本地圖功能：展示（支持2D圖、3D圖、衛(wèi)星圖）、平移、縮放、拖拽等地圖控件展示功能：

7、可以在地圖上添加/刪除鷹眼、工具條、比例尺、自定義版權(quán)、地圖類型及定位控件，并可以設(shè)置各類控件的顯示位置覆蓋物功能：支持在地圖上添加/刪除點、線、面、熱區(qū)、行政區(qū)劃、用戶自定義覆蓋物等；開源庫提供富標注、標注管理器、聚合marker、自定義覆蓋物等功能覆蓋物功能Javascript API大眾版功能介紹工具類：提供經(jīng)緯度坐標與屏幕坐標互轉(zhuǎn)功能；開源庫里提供測距、幾何運算及GPS坐標/國測局坐標轉(zhuǎn)百度坐標等功能定位功能：支持IP定位及瀏覽器（支持html5特性瀏覽器）定位功能 右鍵菜單：支持在地圖上添加右鍵菜單 鼠標交互：支持動態(tài)修改鼠標樣式、鼠標拖拽/縮放地圖及鼠標繪制等功能 圖層功能：支持重

8、設(shè)地圖底圖、地圖上疊加實時交通圖層或自定義圖層功能 給地圖添加右鍵菜單Javascript API大眾版功能介紹本地搜索功能：包括根據(jù)城市、矩形范圍、圓形范圍等條件進行POI搜索；且支持用戶自有數(shù)據(jù)的檢索 公交檢索：支持起始點坐標、起始點名稱、LocalSearchPoi實例三種檢索條件的檢索；檢索結(jié)果支持便捷、可換乘、少步行、不乘地鐵四種方案 駕車檢索：支持三種檢索條件的檢索；返回最短時間、最短距離、避開高速的駕車導航結(jié)果；且提供計算打車費用服務(wù) 本地搜索功能Javascript API大眾版功能介紹步行導航：提供步行導航方案逆/地理編碼：支持百度坐標與地址描述信息之間的轉(zhuǎn)換服務(wù) 個性化數(shù)據(jù)

9、展示功能：用戶自有數(shù)據(jù)存儲到LBS.云后，JavaScript API可以提供以麻點圖形式展示自有數(shù)據(jù)功能逆/地理編碼Javascript API大眾版開發(fā)指南/準備頁面 /添加meta標簽，以便使頁面更好的在移動平臺上展示/注意此處的編碼方式百度地圖 JavaScript APIv1.0 開發(fā)指南Hello, World/網(wǎng)頁標題htmlheight:100%bodyheight:100%;margin:0px;padding:0px#containerheight:100%/設(shè)置樣式，使地圖充滿整個瀏覽器窗口script type=text/javascript“src=/api?v=1.

10、0/創(chuàng)建div元素/用來作為展示地圖的容器var map = new BMap.Map(container); / 創(chuàng)建地圖實例var point = new BMap.Point(116.404, 39.915); / 創(chuàng)建點坐標map.centerAndZoom(point, 15); / 設(shè)置中心點坐標和級別1.百度地圖的“Hello, World”Javascript API大眾版開發(fā)指南1.百度地圖的“Hello, World”Javascript API大眾版開發(fā)指南2.控件： 百度地圖上負責與地圖交互的UI元素稱為控件Control：控件的抽象基類，通過此類您可實現(xiàn)自定義控件 N

11、avigationControl：地圖平移縮放控件，它包含控制地圖的平移和縮放的功能OverviewMapControl：縮略地圖控件，默認位于地圖右下方 ScaleControl：比例尺控件，顯示地圖的比例關(guān)系 MapTypeControl：地圖類型控件，默認位于地圖右上方 CopyrightControl：版權(quán)控件，默認位于地圖左下方 GeolocationControl：定位控件，針對移動端開發(fā) Javascript API大眾版開發(fā)指南2.控件：使用Map.addControl()方法向地圖添加控件：map.addControl(new BMap.NavigationControl()

12、; map.addControl(new BMap.ScaleControl(); map.addControl(new BMap.OverviewMapControl(); map.addControl(new BMap.MapTypeControl();map.setCurrentCity(“北京”); Javascript API大眾版開發(fā)指南2.控件：Javascript API大眾版開發(fā)指南自定義控件百度地圖API允許通過繼承Control來創(chuàng)建自定義地圖控件。步驟如下：定義一個自定義控件的構(gòu)造函數(shù) 設(shè)置自定義控件構(gòu)造函數(shù)的prototype屬性為Control 的實例，以便繼承控件

13、基類實現(xiàn)initialize()方法并提供defaultAnchor和defaultOffset 屬性Javascript API大眾版開發(fā)指南function ZoomControl()/ 定義一個控件類，即function this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); ZoomCtotype = new BMap.Control(); / 通過prototype屬性繼承于BMap.Control / 在本方法中創(chuàng)建個div元素作為控件的容器，并將其添加到地圖容器中

14、 ZoomCtotype.initialize = function(map)/ 實現(xiàn)initialize方法，將控件DOM元素返回 var div = document.createElement(“div”); / 創(chuàng)建一個DOM元素div.appendChild(document.createTextNode(“放大2級”); / 添加文字說明 div.style.cursor = “pointer”; / 設(shè)置樣式 div.style.border = 1px solid gray; div.style.backgroundColor = white; div.onclick = fu

15、nction(e) map.zoomTo(map.getZoom() + 2); / 綁定事件，點擊一次放大兩級 map.getContainer().appendChild(div); / 添加DOM元素到地圖中 return div; / 將DOM元素返回 var myZoomCtrl = new ZoomControl(); / 創(chuàng)建控件實例 map.addControl(myZoomCtrl); / 添加到地圖當中Javascript API大眾版開發(fā)指南3.覆蓋類 所有疊加或覆蓋到地圖的內(nèi)容，統(tǒng)稱為地圖覆蓋物。如標注、矢量圖形元素(折線和多邊形和圓)、信息窗口等。Overlay：抽象

16、基類，所有的覆蓋物均繼承此類的方法Marker：標注表示地圖上的點，可自定義標注的圖標Label：表示地圖上的文本標注Polyline：表示地圖上的折線Polygon：表示地圖上的多邊形Circle: 表示地圖上的n圓InfoWindow：信息窗口展示更為豐富的文字和多媒體信息Javascript API大眾版開發(fā)指南3.覆蓋類使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物var marker = new BMap.Marker(point); / 創(chuàng)建標注 map.addOverlay(marker); / 將標注添加到地圖中var

17、 polyline = new BMap.Polyline( new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920) , strokeColor:blue, strokeWeight:6, strokeOpacity:0.5 ); map.addOverlay(polyline); var opts = width : 250, height: 100, title : “Hello” ;var infoWindow = new BMap.InfoWindow(“World”, opts); / 創(chuàng)建窗口 map.ope

18、nInfoWindow(infoWindow, map.getCenter(); / 打開窗口 添加行政區(qū)劃Javascript API大眾版開發(fā)指南4.事件瀏覽器中的JavaScript是“事件驅(qū)動的”，用戶的鼠標和鍵盤交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對某些事件感興趣的程序會為這些事件注冊JavaScript事件監(jiān)聽器，并在接收這些事件時執(zhí)行代碼。百度地圖API擁有一個自己的事件模型，可監(jiān)聽地圖API對象的自定義事件。Javascript API大眾版開發(fā)指南百度地圖API可以通過addEventListener方法來監(jiān)聽對象事件該方法有兩個參數(shù)：監(jiān)聽事件名稱和事件觸發(fā)時調(diào)用的函數(shù) var

19、 map = new BMap.Map(container); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener(dragend, function() var center = map.getCenter(); alert(地圖中心點變更為： + center.lng + , + center.lat); ); 當不希望監(jiān)聽事件時，removeEventListener 用來移除事件監(jiān)聽函數(shù)。 4.事件Javascript API大眾版開發(fā)指南5.地圖圖層 地圖可以包含一個或多個圖層，如

20、TrafficLayer交通流量圖層通過map.addTileLayer方法可向地圖添加圖層 調(diào)用map.removeTileLayer方法從地圖上移除圖層 var map = new BMap.Map(“l(fā)-map”); / 創(chuàng)建地圖實例 var point = new BMap.Point(116.404, 39.915); / 創(chuàng)建點坐標 map.centerAndZoom(point, 15); /初始化地圖var traffic = new BMap.TrafficLayer(); / 創(chuàng)建交通流量圖層實例 map.addTileLayer(traffic); / 將圖層添加到地圖上

21、map.removeTileLayer(traffic); / 將圖層移除Javascript API大眾版開發(fā)指南6.工具工具已經(jīng)制作成開源庫（lib）對外免費開放，可直接訪問JavaScript開源庫。MarkerTool：標注工具。用戶可在地圖任意區(qū)域添加標注。MarkerClusterer：多標注聚合器，解決加載大量點要素到地圖上造成緩慢。MarkerManager：標注管理工具。此工具提供展示、隱藏、清除所有標注。RichMarker：富標注工具，為用戶提供自定義Marker樣式，并添加點擊、雙擊、拖拽等事件。Javascript API大眾版開發(fā)指南6.工具var map = ne

22、w BMap.Map(container); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myPushpin = new BMap.PushpinTool(map); / 創(chuàng)建標注工具 myPushpin.addEventListener(markend, function(e) alert(您標注的位置： + e.marker.getPoint().lng + , + e.marker.getPoint().lat); ); myPushpin.open(); / 開啟標注工具 Javascript API大眾版開發(fā)

23、指南6.工具LuShu：路書，軌跡運動工具，實現(xiàn)marker沿路線運動。CityList：城市列表工具。AreaRestriction：區(qū)域限制工具。此工具為用戶提供百度地圖瀏覽區(qū)域限制設(shè)置。GeoUtils：幾何運算工具，提供判斷點與矩形、 圓形、多邊形線、多邊形面的關(guān)系,提供計算折線長度和多邊形面積的公式。TrafficControl：實時交通控件。此工具提供將交通流量圖層在地圖上的實時顯示，隱藏等。Javascript API大眾版開發(fā)指南6.工具DrawingManager：鼠標繪制工具，用戶可以在地圖任意位置上畫點、畫線、畫面并顯示線的距離及面的面積EventWrapper：事件封裝

24、工具，提供了人性化的事件使用方法TextIconOverlay：自定義覆蓋物工具，使用該工具在 地圖上添加文字和圖標樣式的覆蓋物SearchInRectangle：拉框縮放工具，實現(xiàn)三種拉框搜索效果SearchInfoWindow：“百度地圖樣式”的信息窗口工具，提供帶搜索框的信息窗口，該窗口內(nèi)容可自由定制多種風格。SearchControl：檢索控件，針對移動端，提供城市列表選擇、本地檢索框、公交駕車查詢框。Javascript API大眾版開發(fā)指南7.服務(wù)地圖服務(wù)是指那些提供數(shù)據(jù)信息的接口，比如本地搜索、路線規(guī)劃LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務(wù)Transit

25、Route：公交導航，提供公交出行方案的搜索服務(wù)DrivingRoute：駕車導航，提供駕車出行方案的搜索服務(wù)WalkingRoute：步行導航，提供步行出行方案的搜索服務(wù)Geocoder：地址解析，提供將地址信息轉(zhuǎn)換為坐標點信息的服務(wù)LocalCity：本地城市，提供自動判斷您所在城市的服務(wù)TrafficControl：實時路況控件，提供實時和歷史路況信息服務(wù)Javascript API大眾版開發(fā)指南7.服務(wù)LocalSearch需要設(shè)置一個檢索區(qū)域，可以是BMap.Map對象、BMap.Point對象或者是省市名稱（“北京市”）的字符串LocalSearch構(gòu)造函數(shù)的第二個參數(shù)，BMap.

26、RenderOptions類提供了若干控制呈現(xiàn)的屬性var map = new BMap.Map(container); var local = new BMap.LocalSearch(map, renderOptions:map: map ); local.search(天安門);BMap.LocalSearch還提包含searchNearby和searchInBounds方法，提供周邊搜索和范圍搜索服務(wù)Javascript API大眾版開發(fā)指南8.用戶數(shù)據(jù)圖層 百度地圖API可以將用戶上傳到LBS云里的位置數(shù)據(jù)實時渲染成圖層，然后通過CustomLayer對象疊加到地圖上。CustomL

27、ayer類提供讀取LBS云數(shù)據(jù)接口，并自動渲染用戶數(shù)據(jù)生成數(shù)據(jù)圖層，同時提供單擊疊加圖層返回poi數(shù)據(jù)的功能。Javascript API大眾版開發(fā)指南9.全景圖展現(xiàn)百度全景地圖提供沿著全景覆蓋城市指定道路、指定位置點360度的全景視圖，相比二維地圖全景圖更加真實、直觀百度LBS開放平臺通過JavaScript API對外提供全景功能Javascript API大眾版開發(fā)指南 window.onload = function() var panorama = new BMap.Panorama(panorama); panorama.setPosition(new BMap.Point(120

28、.320032, 31.589666);panorama.setId(010001000013050112241601/5Z1); panorama.setPov(heading: -40, pitch: 6); 經(jīng)除緯度外，還可通過指定全景的id設(shè)置當前顯示的全景視圖 heading和pitch兩個參數(shù)用于設(shè)置全景的視角，heading指攝像頭水平方向（“搖頭”）的角度，正北方向為0，正東為90，正南為180，正西為270pitch指攝像頭的垂直方向（“點頭”）Javascript API大眾版開發(fā)指南10.定制個性地圖 定制個性地圖是支持用戶使用JavaScript API設(shè)置地圖底圖的樣

29、式風格（展現(xiàn)顏色為普通、深色、淺色）以及控制組成地圖底圖的元素類的顯示和隱藏，創(chuàng)建滿足用戶特定需求的與眾不同的地圖，如通過隱藏某類地圖元素，突出展示自己的數(shù)據(jù)Javascript API大眾版開發(fā)指南10.定制個性地圖主要內(nèi)容百度地圖API簡介LBS開發(fā)模式Web開發(fā)之Javascript API大眾版開發(fā)Javascript API開發(fā)綜合實例學習建議綜合實例input type=button id=over value=閉合多邊形獲取區(qū)域邊界坐標代碼 在實際地理應(yīng)用中，我們經(jīng)常需要對一面狀地物的邊界、面積等信息進行分析，但是對一些小區(qū)域我們并不能直接從地圖上獲取該方面的信息，因此如何獲取某

30、區(qū)域的邊界，顯得尤為重要。該實例就是綜合利用百度地圖API的相關(guān)控件，函數(shù)等進行地物的有效查詢，并通過加載不同類型的地圖控件，對不同形式的地圖進行比較獲取更為準確的邊界范圍，最后調(diào)用相關(guān)函數(shù)獲取邊界坐標信息綜合實例var map = new BMap.Map(“container”); /創(chuàng)建Map實例map.centerAndZoom(深圳, 11); / 初始化地圖,設(shè)置中心點坐標和地圖級別map.enableScrollWheelZoom();/使鼠標滾輪可用var mapType1 = new BMap.MapTypeControl(mapTypes: BMAP_NORMAL_MAP,

31、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);/添加地圖類型和縮略圖onclick=closePolyline();document.getElementById(startBtn).style.

32、background = red; document.getElementById(startBtn).value = 關(guān)閉狀態(tài); key=1; /代碼綜合實例/根據(jù)輸入的名稱進行查詢，并顯示出來function startQuery() var local = new BMap.LocalSearch(map, renderOptions:map: map,autoViewPoint:true);var name=document.getElementById(name).value;local.search(name);/查詢alert(查找完畢，請謹慎選擇！);/打開txt文檔并將數(shù)據(jù)寫

33、入function writeToTxt(s) /權(quán)限只讀(只讀=1，只寫=2 ，追加=8 等權(quán)限)var ForReading=1,ForAppending=8; var fso=new ActiveXObject(Scripting.FileSystemObject); var addss=C:UsersAdministratorDesktop區(qū)域坐標坐標(new).txtVar f=fso.OpenTextFile(addss,ForAppending,false); f.Write(s);/function add_control()map.addControl(mapType1);

34、/2D圖，衛(wèi)星圖map.addControl(mapType2); /左上角，默認地圖控map.setCurrentCity(北京); /由于有3D圖，需要設(shè)置城市哦map.addControl(overView); /添加默認縮略地圖控件map.addControl(overViewOpen); /右下角，打開/移除地圖類型和縮略圖function delete_control()map.removeControl(mapType1); /移除2D圖，衛(wèi)星圖map.removeControl(mapType2);map.removeControl(overView);map.removeCo

35、ntrol(overViewOpen);/代碼綜合實例map.addEventListener(click,function(e) /單擊地圖，形線覆蓋成折物 newpoint = new BMap.Point(e.point.lng,e.point.lat); if(key=0) points.push(newpoint); /將新增的點放到數(shù)組中 polyline.setPath(points); /設(shè)置折線的點數(shù)組 map.addOverlay(polyline); /將折線添加到地圖上 document.getElementById(info).innerHTML+= e.point.lng + , + e.p