【高德地圖API】從零開始學高德JS API（四）搜索服務

時間 2019-11-13

標籤高德地圖API 開始 api 搜索服務欄目 JavaScript 简体版

原文原文鏈接

demo：http://zhaoziang.com/amap/zero_4_1.html
html

示意圖1：自動完成，輸入提示
web

示意圖2：雲圖，自有數據檢索，A-H圖標顯示，麻點圖數據庫

---------------------------------------------------------------------------------------windows

1、POI搜索api

一、關鍵字查詢瀏覽器

使用search方法，傳一個關鍵詞參數便可。函數

 MSearch.search('東方明珠'); //關鍵字查詢

完整代碼：this

//關鍵詞查詢function placeSearch1() {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //構造地點查詢類  
            pageSize:10,  
            pageIndex:1,  
            city:"021" //城市          });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果  
        MSearch.search('東方明珠'); //關鍵字查詢      });  
}

示意圖：spa

二、輸入提示插件

html部分：

    <div class="autoclass">
        <input type="text" id="keyword" name="keyword" value="" style="width: 95%;"/>  
        <div id="result1" class="autobox" name="result1"></div>
    </div>

JS部分：

在地圖初始化時，添加【自動完成/輸入提示】插件。

    //加載輸入提示插件  
    mapObj.plugin(["AMap.Autocomplete"], function() {  
        //判斷是否IE瀏覽器  
        if (navigator.userAgent.indexOf("MSIE") > 0) {  
            document.getElementById("keyword").onpropertychange = autoSearch;  
        }  
        else {  
            document.getElementById("keyword").oninput = autoSearch;  
        }  
    });

輸入提示部分：

//輸入提示  function autoSearch() {   
    var keywords = document.getElementById("keyword").value;  
    var auto;    
    var autoOptions = {  
        pageIndex:1,  
        pageSize:10,  
        city: "" //城市，默認全國      };  
    auto = new AMap.Autocomplete(autoOptions);  
    //查詢成功時返回查詢結果  
    AMap.event.addListener(auto, "complete", autocomplete_CallBack);  
    auto.search(keywords);  
}

示意圖：

三、周邊查詢

使用searchNearBy方法，須要傳入關鍵詞，中心點經緯度，搜索半徑。

MSearch.searchNearBy("酒店", cpoint, 500);

所有代碼：

//周邊查詢函數  var cpoint = new AMap.LngLat(116.405467,39.907761); //搜索查詢的中心點設置function placeSearch2() {  
    var MSearch;  
    //加載服務插件，實例化地點查詢類    
    mapObj.plugin(["AMap.PlaceSearch"], function() {  
        MSearch = new AMap.PlaceSearch({   
            city: "北京"  
        });   
        //查詢成功時的回調函數  
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);   
        //周邊搜索  
        MSearch.searchNearBy("酒店", cpoint, 500);   
    });  
}

示意圖：

四、可視區域查詢五、範圍內查詢

範圍內查詢，能夠是多邊形，能夠是圓形，也能夠是矩形。

咱們在這裏，用一個矩形搜索來舉例。

使用searchInBounds方法，傳入關鍵詞，與範圍便可。

MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //範圍查詢

可視區域，就是視野內查詢，這時能夠獲取整個可視區域，把這個區域傳給範圍內搜索便可。

mapObj.getBounds(); //獲取可視區域範圍

所有代碼：

//範圍內搜索-矩形function placeSearch3(){  
    clearMap();  
    var arr = new Array();  
    var MSearch;  
    //繪製矩形邊框     
    arr.push(new AMap.LngLat("116.423321","39.884055"));   
    arr.push(new AMap.LngLat("116.473103","39.884055"));   
    arr.push(new AMap.LngLat("116.473103","39.919348"));   
    arr.push(new AMap.LngLat("116.423321","39.919348"));  
    var polygon = new AMap.Polygon({  
        map:mapObj,   
        path:arr,   
        strokeColor:"#0000ff",   
        strokeOpacity:0.2,   
        strokeWeight:3,   
        fillColor: "#f5deb3",   
        fillOpacity: 0.8   
    });     
    mapObj.plugin(["AMap.PlaceSearch"], function() { //加載PlaceSearch服務插件        
        MSearch = new AMap.PlaceSearch({  
            pageSize: 8  
        }); //構造地點查詢類  
        AMap.event.addListener(MSearch, "complete", Search_CallBack); //查詢成功時的回調函數  
        MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //範圍查詢      });  
}

示意圖：

六、道路查詢（交叉口）

若是要查詢北京的101國道，須要傳參數‘101’和‘北京’。

//道路交叉口function roadCrossSearchByRoadName(){    
    var roadname = '101';    
    var city2 = '北京';    
    var RoadSearchOption = {    
        number:10,//每頁數量,默認10    
        batch:1,//請求頁數，默認1    
        ext:""//擴展字段            };    
    var road = new AMap.RoadSearch(RoadSearchOption);  
    road.roadCrossSearchByRoadName(roadname,city2,roadCrossSearch_CallBack);  

}

示意圖：

七、自有數據檢索（不須要數據庫）

檢索自有數據，是個人最愛。其實就是使用雲圖就行了。

登陸雲圖管理臺：http://yuntu.amap.com/datamanager/index.html

新建地圖

批量導入自有數據，或者手工添加自有數據。

點擊預覽，便可得到本身的地圖！好比這樣的：http://yuntu.amap.com/share/MZVB3y

顯示雲圖層，須要得到本身的tableID：

//疊加雲數據圖層  function addCloudLayer() {  
    clearMap();    //加載雲圖層插件  
    mapObj.plugin('AMap.CloudDataLayer', function () {  
        var layerOptions = {   
            query:{keywords: ''},   
            clickable:true  
        };  
        cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //實例化雲圖層類  
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖 }

更多詳細教程，能夠查看：

《東莞酒店雲圖》：http://www.cnblogs.com/milkmap/p/3657829.html

《貪官羅馬圖》：http://www.cnblogs.com/milkmap/p/3678377.html

《三甲醫院雲圖》：http://www.cnblogs.com/milkmap/p/3637899.html

經過雲圖的雲檢索功能，檢索出自有數據中的「酒店」。並用圖片爲A-H的標註進行標示。

雲檢索：

function cloudSearch(){    var arr = new Array();      
    var search;  
    var searchOptions = {  
        keywords:'酒店',  
        orderBy:'_id:ASC'  
    };  
    //加載CloudDataSearch服務插件  
    mapObj.plugin(["AMap.CloudDataSearch"], function() {         
        search = new AMap.CloudDataSearch('5358f853e4b01214f369d851', searchOptions); //構造雲數據檢索類  
        AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查詢成功時的回調函數  
        AMap.event.addListener(search, "error", errorInfo); //查詢失敗時的回調函數  
        search.searchNearBy(yunPoint, 10000); //周邊檢索      }); 
}

檢索成功的回調函數：

function cloudSearch_CallBack(data) {   
    var resultStr="";  
    var resultArr = data.datas;  
    var resultNum = resultArr.length;    
    for (var i = 0; i < resultNum; i++) {    
        resultStr += "<div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><h3><font face=\"微軟雅黑\"color=\"#3366FF\">" + (i+1) + "." + resultArr[i]._name + "</font></h3>";  
        resultStr += '地址：' + resultArr[i]._address + '<br/>類型：' + resultArr[i].type + '<br/>ID：' + resultArr[i]._id + "</td></tr></table></div>";  
        addmarker(i, resultArr[i]);  
    }  
    mapObj.setFitView();  
    document.getElementById("result").innerHTML = resultStr;  
}

添加Marker：

//添加marker&infowindow      function addmarker(i, d) {  
    var lngX; 
    var latY;    var iName;    var iAddress;    if(d.location){
        lngX = d.location.getLng();  
        latY = d.location.getLat();  
    }else{
        lngX = d._location.getLng();  
        latY = d._location.getLat(); 
    }    if(d.name){
        iName = d.name;
    }else{
        iName = d._name;
    }    if(d.name){
        iAddress = d.address;
    }else{
        iAddress = d._address;
    }    var markerOption = {  
        map:mapObj,  
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",  
        position:new AMap.LngLat(lngX, latY)  
    };  
    var mar = new AMap.Marker(markerOption);            
    marker.push(new AMap.LngLat(lngX, latY));  
  
    var infoWindow = new AMap.InfoWindow({  
        content:"<h3><font color=\"#00a6ac\">" + (i + 1) + ". " + iName + "</font></h3>" + TipContents(d.type, iAddress, d.tel),  
        size:new AMap.Size(300, 0),   
        autoMove:true,    
        offset:new AMap.Pixel(0,-30)  
    });  
    windowsArr.push(infoWindow);   
    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};  
    AMap.event.addListener(mar, "click", aa);  
}

效果圖：

demo：http://zhaoziang.com/amap/zero_4_1.html

原文地址：http://www.cnblogs.com/milkmap/p/3745701.html