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