<xmp id="youqw">
<xmp id="youqw">
  • <blockquote id="youqw"><blockquote id="youqw"></blockquote></blockquote>
    站長工具,就用查一把!
    收錄查詢  關鍵詞排名  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>

      

    網友點評
    国产AV精选aaaaaaa