Provincial urban three-level linkage jquery plug-in City-picker and Baidu Map API linkage small case

Source: Internet
Author: User

City-picker plugin is open source China a very useful three-level linkage menu

Use City-picker alone:

<body>    <div id= "R-result" >         Please enter:<input type= "text" id= "Suggestid" size= "style=" width:150px; "/></body><script type=" Text/javascript ">    $ (function() {        $ ("#suggestId"). Citypicker ();    }); </script>

Effect:

Join the Baidu API can realize the automatic completion of the address linkage city-picker

Effect

1. Enter a Chongqing, auto complement full path

Just a little bit, then Citypark can automatically change

The code is as follows:

Import Js,css,image correctly first

<body> <div style= "position:relative;" > <!--Cityparck items--<input type= "text" id= "Suggestid" size= "/> <!" --Baidu Map--<input type= "text" id= "Baidumap" value= "Please enter Address" size= "/> </div> </bod" y> <script type= "Text/javascript" >        $(function() {            $("#suggestId"). Citypicker ();        }); varAC =NewBmap.autocomplete (//Create an auto-complete object{"Input": "Baidumap"        }); varmyvalue; Ac.addeventlistener ("Onconfirm",function(e) {//event after mouse click on drop-down list            var_value =E.item.value; MyValue= _value.province + _value.city + _value.district + _value.street +_value.business; varAddress =encodeURIComponent (myvalue); //according to the input address cloud inverse geocoding into a standard interface$.getjson ("Http://api.map.baidu.com/cloudgc/v1?ak= your key &address=" +address+ "&callback=?",                function(data) {//The status==0 represents the correct return, and result is the returned data                    if(Data.status = = 0 && data.result.length > 0) {                        //Reset Citypicker$ ("#suggestId"). Citypicker (' Reset ')); $("#suggestId"). Citypicker (' Destroy '); //implant the Citypicker into the provinces and cities that have been received.$ ("#suggestId"). Citypicker ({province:data.result[0].address_components.province, city:data.result[0].address_components.city, district:data.result[0].address_components.district});        }                }); });

Provincial urban three-level linkage jquery plug-in City-picker and Baidu Map API linkage small case

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.