javascript跨域请求(利用jquery)

项目中需要用到经纬度(北纬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>



你可能感兴趣的:(JavaScript,jsonp,跨域)