js-web跨域實現百度地圖普通ip定位

希望實現的功能:進入頁面利用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}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章