wed端 百度地圖獲取當(dāng)前所在城市

更新了一版,首頁(yè)也會(huì)自動(dòng)定位并提示切換
https://github.com/MiuMiu-S/Locate-current-City


效果.png

正在獲取.png
失敗.png

功能說(shuō)明:

????點(diǎn)擊獲取城市,獲取當(dāng)前位置的經(jīng)緯度,然后轉(zhuǎn)換為城市信息
????獲取成功正常顯示
????超過(guò)10秒未獲取到或者獲取失敗顯示“獲取超時(shí)點(diǎn)擊重試”
????如果獲取到的城市不在城市列表中,顯示“獲取失敗點(diǎn)擊重試”

HTML
<div class="position" id="baidu_geo">點(diǎn)擊獲取城市</div>
<div class="city">
    <p>當(dāng)前定位城市</p>
    <span class="info baidu_map" id="baidu_geo"><span>
    <img src="../../images/v2/Loading_icon2-2.gif">正在獲取定位</span></span>
    <input type="hidden" value="">
    <img src="../../images/v2/indexrefresh@2x.png" style="display: none;"> <!--為了避免網(wǎng)路不佳情況下,定位失敗圖標(biāo)請(qǐng)求不到-->
</div>
JS
<script src="http://api.map.baidu.com/api?v=2.0&amp;ak=申請(qǐng)的key"></script>
<script src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=申請(qǐng)的key&amp;services=&amp;" type="text/javascript"></script>
var t, city;
function refresh() {
    $("#baidu_geo").addClass("baidu_map");
    $(".baidu_map").html('<span><img src="../../images/v2/Loading_icon2-2.gif">正在獲取定位</span>');
    setTimeout(function() {
        if ($("#baidu_geo").next("input").attr("value").length == 0) {
            $("#baidu_geo").removeClass("baidu_map").html('<span onclick="refresh()" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位獲取超時(shí),請(qǐng)點(diǎn)擊重試</span>');
        }
    }, 10000);
    baiduPosition(35);
}
$$('.position').on('click', function() {
    myApp.popup('.popup-about2');
    // 定位城市信息
    clearTimeout(t);
    $("#baidu_geo").next("input").attr("value", "");
    $("#baidu_geo").addClass("baidu_map");
    $(".baidu_map").html('<span><img src="../../images/v2/Loading_icon2-2.gif">正在獲取定位</span>');
    t = setTimeout(function() {
        if ($("#baidu_geo").next("input").attr("value").length == 0) {
            $("#baidu_geo").removeClass("baidu_map").html('<span onclick="refresh()" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位獲取超時(shí),請(qǐng)點(diǎn)擊重試</span>');
        }
    }, 10000);
    baiduPosition(35);
});
// 定位城市信息
function positions(json, cid) {
    //不寫(xiě)報(bào)錯(cuò)
};
function baiduPosition(cid) {
    console.log("shihongfanghshshsshhhsh")
    $(".baidu_map").html('<span><img src="../../images/v2/Loading_icon2-2.gif">正在獲取定位</span>');
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var position = {
                lng: r.point.lng,
                lat: r.point.lat
            }
            if (cid == 'sort') {
                sort(position);
            } else {
                positions(position, cid);
            }
            //console.log('您的位置:' + r.point.lng + ',' + r.point.lat)
            translateCallback(r.point.lng, r.point.lat)
        } else {
            //alert('獲取當(dāng)前位置失敗,請(qǐng)確定您開(kāi)啟了定位服務(wù)');
            $(".baidu_map").html('<span onclick="baiduPosition(35)" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位獲取失敗,請(qǐng)點(diǎn)擊重試</span>');
        }
    }, {
        enableHighAccuracy: true
    });
};

function translateCallback(lng, lat) {
    var latlon = lat + ',' + lng;
    var url = "http://api.map.baidu.com/geocoder/v2/?ak=申請(qǐng)的key&callback=renderReverse&location=" + latlon + "&output=json&pois=0";
    var xhr = $.ajax({
        type: "GET",
        dataType: "jsonp",
        url: url,
        beforeSend: function() {
            $(".baidu_map").html('<span><img src="../../images/v2/Loading_icon2-2.gif">正在獲取定位</span>');
        },
        success: function(json) {
            if (json.status == 0) {
                $(".baidu_map").siblings("input").val(json.result.addressComponent.city + "-" + json.result.addressComponent.district)
                city = json.result.formatted_address.split("市")[0] + "市";
                console.log(city)
                var cityinfo = $(".popup-about2 .warp span").text().split("市");
                if ($.inArray(json.result.formatted_address.split("市")[0], cityinfo) == -1) {
                    $(".baidu_map").html('<span onclick="baiduPosition(35)" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位獲取失敗,請(qǐng)點(diǎn)擊重試</span>');
                } else {
                    $(".baidu_map").html('<span class="close-popup1" onclick="setPresentAddressPrev(this)">' + city.split("市")[0] + '市</span>');
                }
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $(".baidu_map").html('<span onclick="baiduPosition(35)" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位獲取失敗,請(qǐng)點(diǎn)擊重試</span>');
        }
    });
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容