希望實現的功能:進入頁面利用IP自動獲取用戶當前位置
使用工具:百度地圖API—普通IP定位API·web服務API
普通IP定位API官網文檔
使用百度IP定位功能,需要3步驟:
第一步,申請密鑰(AK) ,作爲訪問服務的依據;
第二步,拼寫發送HTTP/HTTPS請求的URL,注意需使用第一步申請的AK;
第三步,接收HTTP/HTTPS請求返回的數據(JSON格式)。
接口示例:
http://api.map.baidu.com/location/ip?ak=請輸入您的AK&coor=bd09ll
或
https://api.map.baidu.com/location/ip?ak=請輸入您的AK&coor=bd09ll
返回數據:
{
address: "CN|北京|北京|None|CHINANET|1|None", #地址
content: #詳細內容
{
address: "北京市", #簡要地址
address_detail: #詳細地址信息
{
city: "北京市", #城市
city_code: 131, #百度城市代碼
district: "", #區縣
province: "北京市", #省份
street: "", #街道
street_number: "" #門址
},
point: #當前城市中心點,注意當前座標返回類型
{
x: "116.39564504",
y: "39.92998578"
}
},
status: 0 #返回狀態碼
}
一開始使用ajax請求地址獲取返回的定位信息,發現報錯,原因是無法跨域。
然後各種問度娘,發現jsonp最好使。
//ip獲取位置
/**
* http://api.map.baidu.com/location/ip?ak=你的密鑰&coor=bd09ll
*/
var url = 'http://api.map.baidu.com/location/ip';
var data = {
ak: "你的密鑰",
coor: "bd09ll",
callback: 'jsonpcallback'//對應值爲自定義回調函數名
};
//組合url
var buffer = [];
for (var key in data) {
buffer.push(key + '=' + encodeURIComponent(data[key]));
}
var fullpath = url + '?' + buffer.join('&');
console.log(fullpath);
CreateScript(fullpath);
//生成script
function CreateScript(src){
var el = document.createElement('script');
console.log(el);
el.src = src;
el.async = true;
el.defer = true;
document.body.appendChild(el);
}
//自定義回調函數,重點
function jsonpcallback(rs) {
// var rs = JSON.stringify(rs);
var city = rs['content']['address_detail']['city'];
city = city.toString().substr(0,city.length - 1);
console.log(rs);//百度地圖返回值
//console.log(city);//城市名稱,去掉最後的“市”
//console.log(rs['content']['point']['x'],',',rs['content']['point']['y']);//座標
}
基本原理是,在頁面添加一行script,利用get獲取,這裏務必要有callback才行
<script src="你的請求地址" async defer></script>
獲取到的返回值:
Object {address: "CN|省份名|城市名|None|CHINANET|0|0", content: Object, status: 0}