[고 덕 맵 API] 제로 부터 고 덕 JS API (4) 검색 서비스 배우 기

지도 서비스POI 검색 소, 입력 알림, 주소 분석, 버스 내 비게 이 션, 운전 내 비게 이 션, 보행 내 비게 이 션, 도로 조회 (교차로), 행정구 역 등.덮개 마 커 가 지도의 골격 이 라면 서 비 스 는 지도의 기 혈 이다.다양한 지도 서비스 가 있어 야 우리 의 지도 응용 이 피 와 살 이 있 고 생동감 있 게 변 할 수 있다.네 번 째 편 은 몇 가지 요점 으로 나 뉘 었 는데, 이 편 은 주로 검색 서 비 스 를 말한다.주변 검색, 키워드 검색, 범위 검색, 검색 알림 (자동 완성, 입력 알림), 행정구 역, 교차로, 검색 자체 데이터 (구름 그림) 를 포함한다.
demo：http://zhaoziang.com/amap/zero_4_1.html
설명도 1: 자동 완성, 알림 입력
설명도 2: 구름 그림, 자체 데이터 검색, A - H 아이콘 표시, 마 점 그림
1. POI 검색
1. 키워드 조회
search 방법 을 사용 하여 키워드 인 자 를 전달 하면 됩 니 다.
MSearch. search ('동방 명주'); / /키워드 검색
전체 코드:

//     
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('    '); //       
    });  
}  

설명도:
2. 힌트 입력
html 부분:

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);  
}  

설명도:
3. 주변 조회
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);   
    });  
} 

설명도:
4. 시각 영역 조회 5. 범위 내 조회
범위 내 에서 조회 하면 다각형 일 수도 있 고 원형 일 수도 있 으 며 직사각형 일 수도 있다.
우 리 는 여기에서 직사각형 검색 으로 예 를 들 었 다.
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])); //      
    });  
}  

설명도:
6. 도로 조회 (교차로)
베 이 징 의 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);  

}    

설명도:
7. 자체 데이터 검색 (데이터베이스 필요 없 음)
자체 데 이 터 를 검색 하 는 것 이 나의 가장 좋아 하 는 것 이다.사실은 구름 그림 을 사 용 했 으 면 좋 겠 어 요.
구름 관리 대 등록: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 += "
" + (i+1) + "." + resultArr[i]._name + "
";  
        resultStr += '  ：' + resultArr[i]._address + '
  ：' + resultArr[i].type + '
ID：' + resultArr[i]._id + "
";  
        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:"
" + (i + 1) + ". " + iName + "
" + 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