使用百度地图进行省市区联动

项目里需要用百度地图来进行省市区的联动,并进行索引:

代码如下(大部分都是复制百度地图源代码,)

首先,在之前的索引页面index.html引入百度地图:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zZKnGNmjfxcI72YApoflePhgLzWzyKUT"></script>

然后在需要进行省市区联动的页面添加代码:

<!--
	描述：用户下单页面
-->
<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/styleorder.css">
<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

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

	

sendAddressac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件

var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;} str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;} str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;});var myValue;sendAddressac.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;// 选中详细地址后，调用百度地图获取 云地理编码 var address = encodeURIComponent(myValue);$.getJSON("http://api.map.baidu.com/cloudgc/v1?ak= 秘钥&address="+address+"&callback=?",function(data){if(data.status == 0 && data.result.length>0 ){$('#sendAreaInfo').citypicker('reset');$('#sendAreaInfo').citypicker('destroy');$('#sendAreaInfo').citypicker({province: data.result[0].address_components.province ,city: data.result[0].address_components.city ,district: data.result[0].address_components.district ,});}});});

以上仅供参考...