最近項目中在使用百度地圖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的一些心得體會,第一次寫博客,有什么不到位的,還請大牛們包含,歡迎指錯。