省市區三級聯動jquery插件 city-picker與百度地圖API聯動小案例

時間 2019-11-21

標籤省市區三級聯動 jquery 插件 city picker 百度地圖 api 案例欄目 JQuery 简体版

原文原文鏈接

city-picker 插件是開源中國一個很好用的三級聯動菜單javascript

單獨使用city-picker ：css

<body>
    <div id="r-result">
        請輸入:<input type="text" id="suggestId" size="20" style="width:150px;" />
</body>
<script type="text/javascript">
    $(function() {
        $("#suggestId").citypicker();
    });
</script>

效果:java

加入百度api可實現自動補全地址聯動city-pickerapi

效果如圖編碼

1.輸入一個重慶，自動補全全路徑spa

隨便點一個，以後cityPark能夠自動改變插件

代碼以下：code

先正確導入js,css,imagecomponent

<body>
        <div style="position: relative;">
            <!-- cityParck項 -->
            <input type="text" id="suggestId" size="50" />
            <!-- 百度地圖 -->
            <input type="text" id="baiduMap" value="請輸入地址" size="50"/>
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            $("#suggestId").citypicker();
        });
        var ac = new BMap.Autocomplete(    //創建一個自動完成的對象
            {"input" : "baiduMap"
        });
        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表後的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            var address = encodeURIComponent(myValue);
            //根據輸入的地址雲逆地理編碼成標準接口
            $.getJSON(
                "http://api.map.baidu.com/cloudgc/v1?ak=你的密鑰&address="+address+"&callback=?",
                function(data) {
                    //status==0 表明正確返回，result爲返回的數據
                    if(data.status == 0 && data.result.length > 0) {
                        //重置citypicker
                        $("#suggestId").citypicker('reset');
                        $("#suggestId").citypicker('destroy');
                        //將citypicker植入接受回來的省市區
                        $("#suggestId").citypicker({
                            province : data.result[0].address_components.province,
                            city : data.result[0].address_components.city,
                            district : data.result[0].address_components.district
                        });
                    }
                });
        });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。