前端使用lbs云地图补全详细地址搜素功能（涉及跨域请求）
跨域请求_专题讲解
在Java中,我们可以通过WebClient或HttpClient直接进行跨域远程访问, 但是在前端页面中通过js却存在着限制
1.什么是跨域访问? http://localhost:8080/xxx/xxx
协议，端口，域名任一不同即跨域, 浏览器由于自身限制默认所有文件都不支持跨域访问,例如:
$.post( "域外地址", {}, function(data){
});
但是也有例外,如果网页上通过<scriptsrc="域外js"></script>,<imgsrc=”域外图片”/>以及<link href=”域外样式”/>这样的标签来引用域外的资源是可以的
2.如何实现跨域访问?
我们可以在远程服务器上把json数据装进js文件里，然后把该js文件输出给客户端, 客户端通过<script>标签来接收, 这就是jsonp(JSON with Padding)
3.演示jsonp的实现原理(参考代码在最后一天的项目源码中)
运行http://localhost:9001/bos_management/TestJSONP.html
l bos_management项目中的TestJSONP.html
l bos_fore项目中的JSONPAction.java
4.getJSON方法的实现原理
jQuery给我们提供了一个getJSON函数用来实现跨域访问, 打开”getJSON方法实现跨域请求原理分析.bmp”
如果只是简单生成自动搜索补全只需要
var ac = new BMap.Autocomplete( //建立一个”自动完成”类的对象
{
"input": "sendAddress" //input是固定参数名, 值是下面网页中"详细地址"文本框的ID
});
代码如下：
效果图：
代码进阶：输入详细地址后，会自动更改省市区信息
<scripttype="text/javascript">
varac = new BMap.Autocomplete( //建立一个”自动完成”类的对象
{
"input": "sendAddress" //input是固定参数名, 值是下面网页中"详细地址"文本框的ID
});
//其实上面的代码就已经实现了自动补全功能,下面的代码是为了获取云地理编码数据,解决详细地址跟省市区不一致的bug
varmyValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表某一项的事件
var_value = e.item.value; //得到选中项的值
myValue= _value.province + _value.city //从选中项的值中分别把省市区街道商户名等详细信息取出来
+_value.district + _value.street
+_value.business;
console.log(myValue);
//得到详细地址后，远程调用百度地图获取云地理编码数据
varaddress = encodeURIComponent(myValue); //转码处理
console.log(address);
$.getJSON("http://api.map.baidu.com/cloudgc/v1?ak=zbLsuDDL4CS2U0M4KezOZZbGUY9iWtVf&address="
+address + "&callback=?",
function(data){
console.log(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,
});
}
});
});
</script>