百度地图在用户输入的省市区范围内进行关键字智能提示搜索_百度地图怎么设置搜索关键词-优快云博客

本文链接：https://blog.youkuaiyun.com/qiansubieci/article/details/78760708

本文介绍了一种利用百度地图API结合自定义输入框实现地址输入的方法，通过隐藏默认搜索框并利用键盘弹起事件来实现在指定区域内进行关键字搜索的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在进行表单输入地址的时候分为省市区和详细地址，省市区用citypicker插件可以轻松完成，但是输入详细地址的时候要调用百度API进行关键字智能提示，那么问题来了，如何在用户输入的省市区内进行关键字搜索呢？不知道各位有没有这种疑惑？

其实解决方法也很简单，将百度地图给的搜索框隐藏掉，自己添加一个输入框，然后在添加的输入框上添加键盘弹起事件，通过事件给隐藏的搜索框赋值（含有省市区），问题解决。

废话不多说，上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <!--引入citypicker相关配置-->
        <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/city/city-picker.data.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/city/city-picker.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../js/city/css/city-picker.css" />
        <style type="text/css">
            body,
            html {
                width: 100%;
                height: 100%;
                margin: 0;
                font-family: "微软雅黑";
                font-size: 14px;
            }

            #r-result {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***您的AK***"></script>
        <title>关键字输入提示词条</title>
    </head>

    <body>
        <div style="position: relative;">
            <input id="pct" readonly type="text" style="width:300px;">
        </div>

        <!--citypicker产生的省市区无法直接获取省、市、区，故编写一个隐藏省、市、区输入框-->
        <!--隐藏的省市区，方便下面调用-->
        <div style="position: relative;">
            <input id="province" name="province" type="hidden" />
            <input id="city" name="city" type="hidden" />
            <input id="district" name="district" type="hidden" />
        </div>
        <!--此输入框替代智能搜索输入框，将搜索关键字输入到此输入框中，然后调用此输入框的键盘弹起事件，对默认的关键字搜索框进行赋值，赋的值为输入的省市区+搜索的关键字-->
        <div id="r-result">
            <input type="text" id="suggestId2" value="" style="width:300px;" onfocus="setValue(this)" onkeyup="mysearch(this)"/>
        </div>
        <!--智能搜索提示框默认显示在输入搜索关键字的下面-->
        <!--将关键字搜索输入框隐藏，但是要进行占位。不然智能搜索提示框出现的位置会有异常。进行占位之后搜索提示框就会出现在该输入框的下面。-->
        <!--visibility:hidden：将输入框隐藏但占位-->
        <div id="r-result"><input type="text" id="suggestId" value="" style="width:300px;height:0px;visibility:hidden"/></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </body>
</html>
<script type="text/javascript">
    /*citypicker*/
    $("#pct").citypicker();

    /*替代的关键字搜索框的聚焦事件，将citypicker中的省市区信息注入隐藏的省市区输入框中*/
    function setValue() {
        var pct = $("#pct").val();
        var pcts = new Array();
        pcts = pct.split("/")
        $("#province").val(pcts[0]);
        $("#city").val(pcts[1]);
        $("#district").val(pcts[2]);
    };
    /*替代的关键字搜索框的键盘弹起事件*/
    function mysearch(e) {
        if($('#province').val() == '') {
            alert('请先选择省市区');
            $('#suggestId').val('');
            $('#suggestId2').val('');
        }
        /*对默认的关键字搜索框进行赋值*/
        $('#suggestId').val($('#province').val() + $('#city').val() + $('#district').val() + $(e).val());
    }

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var ac = new BMap.Autocomplete( //建立一个自动完成的对象
        {
            "input": "suggestId"
        });

    var myValue;
    ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
        /*替代的关键字搜索框显示的内容不需要省市区信息*/
        $('#suggestId2').val(_value.street + _value.business);
    });

    function setPlace() {
        var local = new BMap.LocalSearch({ //智能搜索
            onSearchComplete: function(){
                local.getResults().getPoi(0).point;
            }
        });
        local.search(myValue);
    }
</script>

效果如下：
效果图

当然在提交表单的时候要在提交按钮上加点击事件：

function ck(){
        /*在提交之前再次对默认搜索框进行赋值*/
        /*防止输入时，点击的是浏览器记住的地址，从而没有触发键盘弹起事件，传出的地址值会为空*/
        $('#suggestId').val($('#province').val() + $('#city').val() + $('#district').val() + $("#suggestId2").val());
        $('#xxForm').submit();
    }