js实现百度地图根据关键字获取信息

申请百度地图 ak的链接

https://jingyan.baidu.com/article/e73e26c0b5b75124adb6a786.html

 

 

申请的应用类型选择浏览器端

环境:

Jdk 1.8

tomcat 8.0

浏览器谷歌，火狐

部署：

放在tomcat中启动。

具体代码如下：

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=key"></script>

其中key的位置是你自己申请的百度地图的ak码。

<div id="l-map" style="display: none"></div>

这行代码是显示地图的，这里我将其隐藏了。

               <select οnclick="selectArea()" id="selectId">
                    <option value ="xx市">xx市</option>
                </select>

<td><input type="text" id="txtVal"  maxlength="20" ></td>

<td><button type="button" οnclick="searchMap();" >查询</button></td>

查询框代码，xx市是你要搜寻的市级

js代码：

    $(function(){
        selectArea ();
    });
    //过滤地址中的关键字
    var selectId ="";

    //查询关键词相关的地址信息等
    function searchMap() {
        $("#tbody").html("");
        $("#total").html("");
        var resultArray = [];
/*        // 百度地图API功能
        var map = new BMap.Map("l-map");
        //xx市的经纬度信息
        map.centerAndZoom(new BMap.Point(jd,wd), 23);
        map.setCurrentCity("xx市");*/
        var options = {
            forceLocal : true ,
            pageCapacity : 50,
            onSearchComplete: function(results){
                if("白山市" != results.city ){
                    return;
                }

                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    var totalPages = results.getNumPages();
                    var currPage = results.getPageIndex();// 获取当前是第几页数据

                    var s = [];
                   //循环放入结果
                    for (var i = 0; i < results.getCurrentNumPois(); i ++){
                        resultArray[50 * currPage + i] = results.getPoi(i);
                    }
                    if (results.getPageIndex() < results.getNumPages() - 1) {

                        local.gotoPage(results.getPageIndex() + 1); // 遍历到最后一页之后不再进行下一页搜索，此时，已经获取到全部的搜索结果，
                    }

                    var tableContent ="";

                    //显示所有结果
                    for (var i = 0; i < resultArray.length; i ++){
                        if("" != selectId){
                            if(resultArray[i].address.indexOf(selectId) < 0){
                                continue;
                            }
                        }

                        tableContent += '<tr><td>'+resultArray[i].title+'</td>';
                        tableContent += '<td>'+resultArray[i].address+'</td>';

                        if('undefined' == typeof(resultArray[i].phoneNumber)){
                            tableContent += '<td></td>';
                        }else{
                            tableContent += '<td>'+resultArray[i].phoneNumber+'</td>';
                        }

                        tableContent += '</tr>';
                        //s.push(resultArray[i].title + ",------- " + resultArray[i].address+",--------"+resultArray[i].phoneNumber);
                    }
                    $("#tbody").append(tableContent);

                    $("#total").html("共"+($("#tabId").find("tr").length - 1)+"条数据");

                    //document.getElementById("r-result").innerHTML = s.join("<br/>");
                }
            }
        };
        var local = new BMap.LocalSearch("xx市", options);
        var txtVal = $("#txtVal").val();
        if("" == txtVal){
            alert("请输入关键词！");
            return;
        }
        var myKeys = [txtVal];
        local.search(txtVal);

    }

    //选择市区
    function selectArea () {
        selectId = $("#selectId").val();
        if("xx市" == selectId){
            selectId = "";
        }
    }

如有问题，请在评论区留言。