您的位置：首页 > Web前端 > JQuery

javascript跨域请求（利用jquery）

2016-01-15 17:30 811 查看

项目中需要用到经纬度（北纬N40°55′42.81″ 东经E106°25′50.30″形式）。目前只有百度坐标，所以需要将百度坐标转换为GPS坐标，再计算得出经纬度。

百度API并没有提供转GPS坐标的接口。因此，找到网站GPSspg API。完成API订阅，获得oid和key。（每天2000次免费），备份

这里在页面中使用js跨域请求返回jsonp格式数据。

一般写法：

$.getJSON("http://api.gpsspg.com/convert/latlng/?jsoncallback=?",  //这里注意下，jsoncallback可以替换任意字符（除其他参数名外，如oid、callback等）
{
oid: "",  //到GPSspg注册获得
key: "",  //到GPSspg注册获得
from: "2",
to: "0",
latlng: "31.0026777169,108.7051969740",
output:"jsonp",
callback:"jsoncallback"       //必须配置，且值为回调函数的名字②
}
);

回调函数

//请求gpsspg网站的回调函数
 function jsoncallback(data) {    //回调函数②
   console.log(data);
   //打印出来的data值，如下
   //jsoncallback&&jsoncallback({"status":"200","result":[{"lat":30.99881860,"lng":108.69433701}],"match":[1]})
   //返回值中的字符串“jsoncallback&&jsoncallback”是回调函数的名字
}

可以参考http://aijezdm915.iteye.com/blog/1066299讲的很好

完整代码：

<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">

</div>
<script>
/*
1.丢弃小数部分,保留整数部分
js:parseInt(7/2)
2.向上取整,有小数就整数部分加1
js: Math.ceil(7/2)
3,四舍五入.
js: Math.round(7/2)
4,向下取整
js: Math.floor(7/2)
*/
/*
取绝对值
js：Math.abs(-20);
*/
/*参数lat_lng 可以传递 lat或者lng中的一个*/
function baiduToGPS(lat_lng){
var abs_lat_lng = Math.abs(lat_lng);
//a_  意为all，含有整数和小数部分。
//o_  意为only，只有小数部分
var du = parseInt(abs_lat_lng); //度(不含小数部分)
var o_du = lat_lng - du;   //度(只有小数部分)
var a_fen = o_du * 60;  //分(含有整数和小数部分)
var fen = parseInt(a_fen);  //分(不含小数部分)
var o_fen = a_fen - fen;  //分(只有小数部分)
var a_miao = o_fen * 60;   //秒(含有整数和小数部分)
var miao = a_miao.toFixed(2);      //秒(取两位小数)
var value = du + '°' + fen + '′' + miao + '″';
console.log(value);
return value;
}

//请求gpsspg网站的回调函数
function jsoncallback(data) {
console.log('转换状态:'+data.status);
//jsoncallback&&jsoncallback({"status":"200","result":[{"lat":30.99881860,"lng":108.69433701}],"match":[1]})
console.log('GPS坐标:'+data.result[0].lat+','+data.result[0].lng);
var lat = data.result[0].lat;
var lng = data.result[0].lng;
var lat_value = baiduToGPS(lat);
var lng_value = baiduToGPS(lng);
var gps = '';
if(lat >= 0){
gps = gps + '北纬N'+lat_value;
}else{
gps = gps + '南纬S'+lat_value;
}
gps = gps + ',';
if(lng >= 0){
gps = gps + '东经E'+lng_value;
}else{
gps = gps + '西经W'+lng_value;
}
console.log(gps);
}

//第一种方式   getJSON形式
$.getJSON("http://api.gpsspg.com/convert/latlng/?jsoncallback=?",
{
oid: "",
key: "",
from: "2",
to: "0",
latlng: "31.0026777169,108.7051969740",
output:"jsonp",
callback:"jsoncallback"
}
);
//第二种方式  ajax形式
/*
$.ajax({
async:false,
url: 'http://api.gpsspg.com/convert/latlng/',
type: "GET",
dataType: 'jsonp',  //必须有的配置
jsonp:"jsonpcallback", //必须有的配置
data: {
oid: "",
key: "",
from: "2",
to: "0",
latlng: "31.0026777169,108.7051969740",
output:"jsonp",
//callback:"jsoncallback"     //指定函数名或匿名函数都可以
callback:function(data) {
console.log(data);
}
},
timeout: 5000
});
*/

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航