服務(wù)
地圖服務(wù)概述
地圖服務(wù)是指那些提供數(shù)據(jù)信息的接口,比如本地搜索、路線規(guī)劃等等。百度地圖API提供的服務(wù)有:
LocalSearch:本地搜索,提供某一特定地區(qū)的位置搜索服務(wù),比如在北京市搜索“公園”。
TransitRoute:公交導(dǎo)航,提供某一特定地區(qū)的公交出行方案的搜索服務(wù)。
DrivingRoute:駕車(chē)導(dǎo)航,提供駕車(chē)出行方案的搜索服務(wù)。
WalkingRoute:步行導(dǎo)航,提供步行出行方案的搜索服務(wù)。
Geocoder:地址解析,提供將地址信息轉(zhuǎn)換為坐標(biāo)點(diǎn)信息的服務(wù)。
LocalCity:本地城市,提供自動(dòng)判斷您所在城市的服務(wù)。
TrafficControl:實(shí)時(shí)路況控件,提供實(shí)時(shí)和歷史路況信息服務(wù)。
搜索類(lèi)的服務(wù)接口需要指定一個(gè)搜索范圍,否則接口將不能工作。
本地搜索
BMap.LocalSearch提供本地搜索服務(wù),在使用本地搜索時(shí)需要為其設(shè)置一個(gè)檢索區(qū)域,檢索區(qū)域可以是BMap.Map對(duì)象、BMap.Point對(duì)象或者是省市名稱(比如:"北京市")的字符串。BMap.LocalSearch構(gòu)造函數(shù)的第二個(gè)參數(shù)是可選的,您可以在其中指定結(jié)果的呈現(xiàn)。BMap.RenderOptions類(lèi)提供了若干控制呈現(xiàn)的屬性,其中map指定了結(jié)果所展現(xiàn)的地圖實(shí)例,panel指定了結(jié)果列表的容器元素。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search("天安門(mén)");
另外,BMap.LocalSearch還提包含searchNearby和searchInBounds方法,為您提供周邊搜索和范圍搜索服務(wù)。
配置搜索
BMap.LocalSearch提供了若干配置方法,通過(guò)它們可以自定義搜索服務(wù)的行為以滿足您的需求。 在下面的示例中,我們調(diào)整每頁(yè)顯示8個(gè)結(jié)果,并且根據(jù)結(jié)果點(diǎn)位置自動(dòng)調(diào)整地圖視野,不顯示第一條結(jié)果的信息窗口:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var local = new BMap.LocalSearch("北京市", {renderOptions: {map: map,autoViewport: true},pageCapacity: 8}); local.search("中關(guān)村");
結(jié)果面板
通過(guò)設(shè)置BMap.LocalSearchOptions.renderOptions.panel屬性,可以為本地搜索對(duì)象提供一個(gè)結(jié)果列表容器,搜索結(jié)果會(huì)自動(dòng)添加到容器元素中。請(qǐng)看下面示例:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, {renderOptions: {map: map,panel: "results"}); local.search("中關(guān)村");
數(shù)據(jù)接口
除了搜索結(jié)果會(huì)自動(dòng)添加到地圖和列表外,您還可以通過(guò)數(shù)據(jù)接口獲得詳細(xì)的數(shù)據(jù)信息,結(jié)合地圖API您可以自行向地圖添加標(biāo)注和信息窗口。BMap.LocalSearch和BMap.LocalSearchOptions類(lèi)提供了若干設(shè)置回調(diào)函數(shù)的接口,通過(guò)它們可得到搜索結(jié)果的數(shù)據(jù)信息。 例如,通過(guò)onSearchComplete回調(diào)函數(shù)參數(shù)可以獲得BMap.LocalResult對(duì)象實(shí)例,它包含了每一次搜索結(jié)果的數(shù)據(jù)信息。 當(dāng)回調(diào)函數(shù)被執(zhí)行時(shí),您可以使用BMap.LocalSearch.getStatus()方法來(lái)確認(rèn)搜索是否成功或者得到錯(cuò)誤的詳細(xì)信息。
在下面這個(gè)示例中,通過(guò)onSearchComplete回調(diào)函數(shù)得到第一頁(yè)每條結(jié)果的標(biāo)題和地址信息,并輸出到頁(yè)面上:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var options = { onSearchComplete: function(results){ if (local.getStatus() == BMAP_STATUS_SUCCESS){ // 判斷狀態(tài)是否正確 var s = []; for (var i = 0; i < results.getCurrentNumPois(); i ++){ s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); } document.getElementById("log").innerHTML = s.join("<br>"); } } }; var local = new BMap.LocalSearch(map, options); local.search("公園");
周邊搜索
通過(guò)周邊搜索服務(wù),您可以在某個(gè)地點(diǎn)附近進(jìn)行搜索,也可以在某一個(gè)特定結(jié)果點(diǎn)周?chē)M(jìn)行搜索。
下面示例展示如何在前門(mén)附近搜索小吃:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions:{map: map, autoViewport: true}}); local.searchNearby("小吃", "前門(mén)");
矩形范圍搜索
矩形范圍搜索將根據(jù)您提供的視野范圍提供搜索結(jié)果。注意:當(dāng)搜索范圍過(guò)大時(shí)可能會(huì)出現(xiàn)無(wú)結(jié)果的情況。
下面示例展示在當(dāng)前地圖視野范圍內(nèi)搜索銀行:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var local = new BMap.LocalSearch(map, { renderOptions:{map: map}}); local.searchInBounds("銀行", map.getBounds());
公交導(dǎo)航
BMap.TransitRoute類(lèi)提供公交導(dǎo)航搜索服務(wù)。和本地搜索類(lèi)似,在搜索之前需要指定搜索區(qū)域,注意公交導(dǎo)航的區(qū)域范圍只能是市,而不能是省。如果搜索區(qū)域?yàn)锽Map.Map對(duì)象,路線結(jié)果會(huì)自動(dòng)添加到地圖上。如果您提供了結(jié)果容器,相應(yīng)的路線描述也會(huì)展示在頁(yè)面上。
下面示例展示了如何使用公交導(dǎo)航服務(wù):
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map} }); transit.search("王府井", "西單");
結(jié)果面板 您可以提供用于展示文字結(jié)果的容器元素,方案結(jié)果會(huì)自動(dòng)在頁(yè)面中展現(xiàn):
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map, panel: "results"} }); transit.search("王府井", "西單");
數(shù)據(jù)接口
您可通過(guò)數(shù)據(jù)接口獲取詳細(xì)的公交方案信息。公交導(dǎo)航搜索結(jié)果用BMap.TransitRouteResult來(lái)表示,其中包含了若干公交出行方案(BMap.TransitRoutePlan)。每條出行方案由步行線路和公交線路組成。 在起點(diǎn)到上車(chē)點(diǎn)之間、下車(chē)點(diǎn)到終點(diǎn)之間以及每個(gè)換乘站之間都會(huì)存在步行線路,如果上述的某兩點(diǎn)位置重合,那么其間的步行路線長(zhǎng)度為0。
在下面示例中,通過(guò)數(shù)據(jù)接口將第一條方案的路線添加到地圖上,并將所有方案的描述信息輸出到頁(yè)面上
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); var transit = new BMap.TransitRoute("北京市"); transit.setSearchCompleteCallback(function(results){ if (transit.getStatus() == BMAP_STATUS_SUCCESS){ var firstPlan = results.getPlan(0); // 繪制步行線路 for (var i = 0; i < firstPlan.getNumRoutes(); i ++){ var walk = firstPlan.getRoute(i); if (walk.getDistance(false) > 0){ // 步行線路有可能為0 map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"})); } } // 繪制公交線路 for (i = 0; i < firstPlan.getNumLines(); i ++){ var line = firstPlan.getLine(i); map.addOverlay(new BMap.Polyline(line.getPoints())); } // 輸出方案信息 var s = []; for (i = 0; i < results.getNumPlans(); i ++){ s.push((i + 1) + ". " + results.getPlan(i).getDescription()); } document.getElementById("log").innerHTML = s.join("<br>"); } }) transit.search("中關(guān)村", "國(guó)貿(mào)橋");
駕車(chē)導(dǎo)航
BMap.DrivingRoute提供駕車(chē)導(dǎo)航服務(wù)。與公交導(dǎo)航不同的是,駕車(chē)導(dǎo)航的搜索范圍可以設(shè)置為省。
下面示例展示了如何使用駕車(chē)導(dǎo)航接口:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); driving.search("中關(guān)村", "天安門(mén)");
結(jié)果面板
下面示例中,我們提供了結(jié)果面板參數(shù),方案描述會(huì)自動(dòng)展示到頁(yè)面上。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var driving = new BMap.DrivingRoute(map, { renderOptions: { map : map, panel : "results", autoViewport: true } }); driving.search("中關(guān)村", "天安門(mén)");
數(shù)據(jù)接口
駕車(chē)導(dǎo)航服務(wù)也提供了豐富的數(shù)據(jù)接口,通過(guò)onSearchComplete回調(diào)函數(shù)可以得到BMap.DrivingRouteResult對(duì)象,它包含了駕車(chē)導(dǎo)航結(jié)果數(shù)據(jù)信息。 結(jié)果會(huì)包含若干駕車(chē)方案(目前僅提供一條方案),每條方案中包含了若干駕車(chē)線路(如果導(dǎo)航方案只包含一個(gè)目的地,那么駕車(chē)線路的個(gè)數(shù)就為1,如果方案包含若干個(gè)目的地,則駕車(chē)線路的個(gè)數(shù)會(huì)大于1。目前API尚不支持多個(gè)目的地的駕車(chē)導(dǎo)航)。 每條駕車(chē)線路又會(huì)包含一系列的關(guān)鍵步驟(BMap.Step),關(guān)鍵步驟描述了具體駕車(chē)行駛方案,可通過(guò)BMap.Step.getDescription()方法獲得。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var options = { onSearchComplete: function(results){ if (driving.getStatus() == BMAP_STATUS_SUCCESS){ // 獲取第一條方案 var plan = results.getPlan(0); // 獲取方案的駕車(chē)線路 var route = plan.getRoute(0); // 獲取每個(gè)關(guān)鍵步驟,并輸出到頁(yè)面 var s = []; for (var i = 0; i < route.getNumSteps(); i ++){ var step = route.getStep(i); s.push((i + 1) + ". " + step.getDescription()); } document.getElementById("log").innerHTML = s.join("<br>"); } } }; var driving = new BMap.DrivingRoute(map, options); driving.search("中關(guān)村", "天安門(mén)");
步行導(dǎo)航接口在使用上與駕車(chē)導(dǎo)航一致,具體請(qǐng)參考API文檔
地理編碼
地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點(diǎn)信息。
根據(jù)地址描述獲得坐標(biāo)
百度地圖API提供Geocoder類(lèi)進(jìn)行地址解析,您可以通過(guò)Geocoder.getPoint()方法來(lái)將一段地址描述轉(zhuǎn)換為一個(gè)坐標(biāo)。在下面的示例中,我們將獲得地址“北京市海淀區(qū)上地10街10號(hào)”的地理坐標(biāo)位置,并在這個(gè)位置上添加一個(gè)標(biāo)注。注意在調(diào)用Geocoder.getPoint()方法時(shí)您需要提供地址解析所在的城市(本例為“北京市”)。
var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 創(chuàng)建地址解析器實(shí)例 var myGeo = new BMap.Geocoder(); // 將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野 myGeo.getPoint("北京市海淀區(qū)上地10街10號(hào)", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); } }, "北京市");
反向地理編碼
反向地理編碼的過(guò)程正好相反,它根據(jù)一個(gè)坐標(biāo)點(diǎn)得到一個(gè)地址的描述。您可以通過(guò)Geocoder.getLocation()方法獲得地址描述。當(dāng)解析工作完成后,您提供的回調(diào)函數(shù)將會(huì)被觸發(fā)。如果解析成功,則回調(diào)函數(shù)的參數(shù)為GeocoderResult對(duì)象,否則為null。
var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 創(chuàng)建地理編碼實(shí)例 var myGeo = new BMap.Geocoder(); // 根據(jù)坐標(biāo)得到地址描述 myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){ if (result){ alert(result.address); } });