隨著地圖應(yīng)用的發(fā)展，開發(fā)了很多地圖API接口，網(wǎng)站使用地圖API也變得越來越頻繁，今天方維網(wǎng)絡(luò)給大家講下百度地圖API如何展示一個點或一座大廈的周邊環(huán)境，也可以叫步行圈，

首先看下展示圖片：



這就是用十分鐘的步行圈(周圍一千米)，現(xiàn)在做房產(chǎn)網(wǎng)站時經(jīng)常會用的功能，就是一座大廈周邊有哪些便民信息，以便用戶通過了解大廈周邊情況來考慮是否租賃。使用案例可參考《快租街》網(wǎng)站。
 
很多網(wǎng)站地圖開發(fā)的程序員可能已經(jīng)在百度地圖API示例找到相關(guān)的代碼了，不過由于輸出的列表信息是地圖API自帶的，所以無法更改樣式，需要擁有獨特的網(wǎng)站排版樣式，就得靠自己獲得接口的信息了，下面給大家講下如何用JS接口獲取這些列表信息的返回值，并標注一些參數(shù)的使用說明.
 
var map = new BMap.Map("l-map"); //初始化地圖
var mPoint = new BMap.Point(113.94442,22.527899); //初始化坐標
var circle = new BMap.Circle(mPoint,1000,{fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.0001, strokeOpacity: 0.5});//圓形初始化，自己可根據(jù)自己的需要對參數(shù)進行修改
//strokeWeight 圓形區(qū)域的大小 
//strokeOpacity:透明度，1為實，不能為0，
//fillOpacity：區(qū)域內(nèi)的背景透明度，1為實，0.01為透明
map.addOverlay(circle);//畫一個圓
最重要的一步，循環(huán)所有的坐標點：
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var title = results.getPoi(i).title; //標題
Var content =results.getPoi(i).address;//地址信息，包括公交站臺，地鐵站點
var lng = results.getPoi(i).point.lng;//坐標經(jīng)度
var lat = results.getPoi(i).point.lat;//坐標緯度
}
local.searchNearby('公交',mPoint,1000);//1000是1000米的圓形范圍
local.disableAutoViewport();//自動調(diào)整地圖視野功能
 
 
由以上信息就能把這些坐標點集合在一起，然后組成一個JS的字符串,將這個字符串的內(nèi)容賦予一個div,如$(‘#map_result’).html(content);
詳細可見源文件，源文件還包括手機版的十分鐘的步行圈,頁面可直接打開查看。

作者:方維網(wǎng)絡(luò)陳應(yīng)信