百度api使用心得體會


最近項目中在使用百度地圖api,對於其中的一些有用的點做一些歸納整理,如有不對的地方,歡迎各位大神糾正指出。

一定要學會查找百度地圖api提供的類參考網站:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html,這個能加快對於地圖的屬性,方法等的應用。

 

一、創建地圖

插入一個div用作地圖的容器,地圖的大小樣式可根據項目需求對樣式大小進行修改。

<style type="text/css">
        body, html, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
        }
</style>
<div id="map"></div>

在html頁中引入api所需要的js庫 如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script type="text/javascript">
 var map = new BMap.Map("map"); // 創建Map實例
 var lng=113.672743;//經度
 var lat=34.766299;//緯度
 var point = new BMap.Point(lng, lat);
 map.centerAndZoom(point, 14);
</script>

如果沒有密鑰可以去百度地圖api官網注冊一個密鑰。

這樣我們就實現好了一個以鄭州為中心點(根據經緯度坐標),地圖縮放比例是14的地圖。

經緯度的獲取可以通過下面百度提供的網站進行抓取:http://api.map.baidu.com/lbsapi/getpoint/index.html

二、地圖標志

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 定義 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl();  // 定義 左上角,添加默認縮放平移控件
map.addControl(top_left_control);//添加
map.addControl(top_left_navigation);//添加

addControl的方法是添加圖控件,例如:比例尺,縮放的滾軸等。關於地圖上的控件可以查看百度api的示例,根據自己的需要進行添加,地址如下:http://lbsyun.baidu.com/jsdemo.htm#a1_2

另外在項目中需要去掉百度左下角的logo及下面附屬的文字,可對左下角樣式進行定義去除:

 .anchorBL {
            display: none;
        }

三、查找

查找的示例:

        var local = new BMap.LocalSearch(map, {
            renderOptions: { map: map }
        });
        local.search("景點");

關於查找我們可以詳細看下LocalSearch這個類,其中查找的方法有search,searchInBounds,searchNearby這三個。

search(keyword: String | Array<String>, option: Object):根據檢索詞發起檢索,當keyword為數組時將同時執行多關鍵字的查詢,最多支持10個關鍵字。

searchInBounds(keyword: String | Array<String>, bounds: Bounds, option: Object):根據范圍和檢索詞發起范圍檢索,當keyword為數組時將同時執行多關鍵字檢索,最多支持10個關鍵字。(這個方法我用到的少,主要是因為bounds沒時間研究)

searchNearby(keyword: String | Array<String>, center:LocalResultPoi| String | Point, radius: Number, option: Object):根據中心點、半徑與檢索詞發起周邊檢索。當keyword為數組時將同時執行多關鍵字的檢索,最多支持10個關鍵字。(這個方法再項目中用到的比較多,項目功能是實現樓盤周邊配套施設的)。

對於LocalSearch中的renderOptions中還包含了一個回調函數onSearchComplete,在項目中的應用比較廣泛:

可以這樣定義:

onSearchComplete: function(results){  
// 判斷狀態是否正確
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
//執行操作
}
}

其中results表示的搜索到的結果集,像例子中就表示是鄭州周邊的景點的結果集。

results中常用到的屬性和方法有:

results.getCurrentNumPois():表示獲取當前頁結果集所有的點。當頁顯示多少可以再renderOptions中定義,比如:pageCapacity: 20,表示顯示20個。

results.getPoi(1).point.lng:獲取結果集第一個點的經度。

results.getPoi(1).point.lat:獲取結果集第一個點的緯度。

results.getPoi(1).point.title:獲取結果集第一個點的名稱。

results.getPoi(1).point.address:獲取結果集第一個點的地址。

results.getPoi(1).point.phoneNumber:獲取結果集第一個點的電話。

map.getDistance:可以根據經緯度計算兩點間的距離,如果用的到可以拓展路線,打車等服務(詳情參考:TaxiFare類)。

四、遮蓋物

有的時候我們需要對地圖上點進行標記等操作,這時候我們就需要對其添加遮蓋物,比較常見的有圓形,矩形,三角形等不規則的簡單遮蓋層,這些百度地圖給的例子中有詳細介紹以及demo。這里我就說一說項目中用到的復雜自定義遮蓋物。

實現思路是通過畫圖的方式,根據點的坐標,通過var pixel = map.pointToOverlayPixel(this._point);這句代碼把坐標跟屏幕的像素進行轉換,以得到遮蓋物在屏幕上顯示的橫縱坐標,並賦值給left和top屬性。

最后通過map.addOverlay(遮蓋物對象)方法,添加遮蓋物。清楚遮蓋無是 map.clearOverlays()。

詳情可以參考:http://lbsyun.baidu.com/jsdemo.htm#c1_11中的覆蓋物示例中的添加自定義覆蓋物,我是根據這個方法進行修改,實現了地圖找房,樓盤周邊交通示例等功能。

 

以上是我最近使用百度地圖api的一些心得體會,第一次寫博客,有什么不到位的,還請大牛們包含,歡迎指錯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM