首页 > 代码库 > 省市区三级联动jquery插件 city-picker与百度地图API联动小案例
省市区三级联动jquery插件 city-picker与百度地图API联动小案例
city-picker 插件是开源中国一个很好用的三级联动菜单
单独使用city-picker ：
<body>
<div id="r-result">
请输入:<input type="text" id="suggestId" size="20" style="width:150px;" />
</body>
<script type="text/javascript">
$(function() {
$("#suggestId").citypicker();
});
</script>
效果:
加入百度api可实现自动补全地址联动city-picker
效果如图
1.输入一个重庆，自动补全全路径
随便点一个，之后cityPark可以自动改变
代码如下：
先正确导入js,css,image
<body>
<div style="position: relative;">
<!-- cityParck项 -->
<input type="text" id="suggestId" size="50" />
<!-- 百度地图 -->
<input type="text" id="baiduMap" value="http://www.mamicode.com/请输入地址" 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 =http://www.mamicode.com/ 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
});
}
});
});
省市区三级联动jquery插件 city-picker与百度地图API联动小案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。