高德地图——搜索

通过api实例了解一些接口功能。比如常用的动态查询信息加载，地图搜索查询地址。自动查询通过[“AMap.Autocomplete”]插件实现，并监听一个回调函数autocomplete_CallBack，查询成功后，执行函数显示查询信息。

//输入提示 
function autoSearch() { 
    var keywords = document.getElementById("keyword").value; 
    var auto; 
    //加载输入提示插件 
    mapObj.plugin(["AMap.Autocomplete"], function() { 
        var autoOptions = { 
            city: "" //城市，默认全国 
        }; 
        auto = new AMap.Autocomplete(autoOptions); 
        //查询成功时返回查询结果 
        if ( keywords.length > 0) { 
            AMap.event.addListener(auto,"complete",autocomplete_CallBack); 
            auto.search(keywords); 
        } 
        else { 
            document.getElementById("result1").style.display = "none"; 
        } 
    }); 
}

回调函数autocomplete_CallBack：

//输出输入提示结果的回调函数 
function autocomplete_CallBack(data) { 
    var resultStr = ""; 
    var tipArr = []; 
    tipArr = data.tips; 
    if (tipArr.length>0) {                   
        for (var i = 0; i < tipArr.length; i++) { 
            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) 
                        + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) 
                        + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; 
        } 
    } 
    else  { 
        resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"; 
    } 

    document.getElementById("result1").innerHTML = resultStr; 
    document.getElementById("result1").style.display = "block"; 
}

回调函数中，data的数据格式为：

其中tips节点展开格式为：adcode、district、name

函数调用tips数据tipArr = data.tips; tipArr[i].name等用于显示自动查询的结果。效果如图，在查询框中输入地址后，自动加载一系列相关地址：

让地图加载我们要查询的地理信息，通过[“AMap.PlaceSearch”]插件实现，同样需要一个回调函数，在完成查询后执行图层的清除，重新加载，新图层和标记。绑定在按钮点击事件：

function search_place(){
    var text = $('#keyword').val();
     //根据选择的输入提示关键字查询 
    mapObj.plugin(["AMap.PlaceSearch"], function() {         
        var msearch = new AMap.PlaceSearch();  //构造地点查询类 
        AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 
        msearch.search(text);  //关键字查询查询 
    });
}

回调函数placeSearch_CallBack：

添加新标记addmarker(i, poiArr[i]); 其中poiArr[i]为pois里的object

//输出关键字查询结果的回调函数 
function placeSearch_CallBack(data) { 
    //清空地图上的InfoWindow和Marker 
    windowsArr = []; 
    marker     = []; 
    mapObj.clearMap(); 
    var resultStr1 = ""; 
    var poiArr = data.poiList.pois; 
    var resultCount = poiArr.length; 
    for (var i = 0; i < resultCount; i++) { 
        resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>"; 
            resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; 
            addmarker(i, poiArr[i]); 
    } 
    mapObj.setFitView(); 
    document.getElementById("result").innerHTML = resultStr1; 
    document.getElementById("result").style.display = "block"; 
}

其中data的格式为:

效果如图：