站長工具,就用查一把!
收錄查詢  關鍵詞排名  Alexa排名  PR檢測  友情檢測  IP反查  WHOIS查詢   更多查詢 
  收藏  最近查詢 查一把
信息分類 首頁 » 資訊信息

好站推薦

IT新聞

  業界猜想

  名人名企

建站推廣

  站長創業

  運營推廣

設計編程

  美工設計

  開發編程

【百度地圖API】如何用圓形搜索獲取中心點周圍100米內全部關鍵點?如天安門附近所有的餐廳、加油站、
信息來源:博客園 發布時間:2011/9/17

摘要:

  在LBS上有這樣一個常用的功能,查找附近所有的關鍵點(POI點,比如標志性建筑物,餐廳,大廈,加油站等)。相信大家對search已經非常熟悉了,可是search必須要傳“關鍵字”參數,即使是多關鍵字搜索,也要把所有POI的tag都一一列舉出來,才能搜索到結果。那么,有沒有什么辦法,可以不用關鍵字,就搜索到附近全部的POI呢?

  答案是肯定的。我們一起來學習一下吧~

-----------------------------------------------------------------------------------------------------------------------------------

示例“搜索在天安門附近500米的12個POI點”。

參數分析:

中心點:天安門

半徑:500米

POI上限數:12

 

 

先來看看效果圖。

 

--------------------------------------------------------------------------------------------------------------------------------------

一、創建地圖和網頁樣式

1、三句話地圖:

創建地圖容器,創建點,設置中心點和地圖級別。

var map = new BMap.Map("container");
var mPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(mPoint,
16);

  

 

2、啟動滾輪縮放

這一條非必須,我只是覺得這樣查看地圖比較方便。

map.enableScrollWheelZoom();        //啟用滾輪縮放

  

 

3、網頁結構

一個確定按鈕、一個地圖容器、一個結果面板

<input type="button" onclick="displayPOI();" value="確定" />
<div style="width:600px;height:340px;border:1px solid gray;float:left;" id="container"></div>
<div style="width:300px;height:340px;border:1px solid gray;border-left:0;float:left;" id="panel"></div>

  

 

 

 

二、使用地址解析得到所有POI點

在類參考里,我們找到這樣一個接口surroundingPois,我們利用這個接口,來得到全部的POI點。

 

 

所以,我們先創建一個地址解析實例:

var myGeo = new BMap.Geocoder();        //創建地址解析實例

  

 

 

 

 

然后使用反地址解析的方法,來看一下代碼和類參考:

  

myGeo.getLocation(mPoint, mCallback(rs),mOption);

  

 
 
如上圖類參考所示,有3個參數:point , callback 和 options。

第一個參數是指定坐標點,這里我們指定的是天安門的坐標。

var mPoint = new BMap.Point(116.404, 39.915);

  

第二個參數是回調函數,用來打印查詢結果,和添加圓形覆蓋物的。surroundingPoi會返回Array<LocalResultPoi>,LocalResultPoi的部分屬性如下:

我們打印出需要的部分即可,比如標題和地址,代碼如下:

document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
map.addOverlay(
new BMap.Marker(allPois[i].point)); //添加圓形覆蓋物

  

第三個參數是用來定義半徑和POI數量的。

var mOption = {
poiRadius :
500, //半徑為1000米內的POI,默認100米
numPois : 12 //列舉出50個POI,默認10個
}

 

 

 

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------

 

 

全部源代碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>所有POI的查詢-地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<input type="button" onclick="displayPOI();" value="確定" />
<div style="width:600px;height:340px;border:1px solid gray;float:left;" id="container"></div>
<div style="width:300px;height:340px;border:1px solid gray;border-left:0;float:left;" id="panel"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var mPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(mPoint,
16);
map.enableScrollWheelZoom();
//啟用滾輪縮放

var mOption = {
poiRadius :
500, //半徑為1000米內的POI,默認100米
numPois : 12 //列舉出50個POI,默認10個
}

var myGeo = new BMap.Geocoder(); //創建地址解析實例
function displayPOI(){
map.addOverlay(
new BMap.Circle(mPoint,500)); //添加一個圓形覆蓋物
myGeo.getLocation(mPoint,
function mCallback(rs){
var allPois = rs.surroundingPois; //獲取全部POI(該點半徑為100米內有6個POI點)
for(i=0;i<allPois.length;++i){
document.getElementById(
"panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
map.addOverlay(
new BMap.Marker(allPois[i].point));
}
},mOption
);
}


</script>

  

網友點評
超碰97免费人妻_蜜汁中文有码网_人妻被黑人与白人巨大中出