wed端百度地图获取当前所在城市

更新了一版，首页也会自动定位并提示切换
https://github.com/MiuMiu-S/Locate-current-City

效果.png

正在获取.png

失败.png

功能说明：

    点击获取城市，获取当前位置的经纬度，然后转换为城市信息
    获取成功正常显示
    超过10秒未获取到或者获取失败显示“获取超时点击重试”
    如果获取到的城市不在城市列表中，显示“获取失败点击重试”

HTML

<div class="position" id="baidu_geo">点击获取城市</div>
<div class="city">
    <p>当前定位城市</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;"> <!--为了避免网路不佳情况下，定位失败图标请求不到-->
</div>

JS

<script src="http://api.map.baidu.com/api?v=2.0&amp;ak=申请的key"></script>
<script src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=申请的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">定位获取超时,请点击重试</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">定位获取超时,请点击重试</span>');
        }
    }, 10000);
    baiduPosition(35);
});
// 定位城市信息
function positions(json, cid) {
    //不写报错
};
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('获取当前位置失败,请确定您开启了定位服务');
            $(".baidu_map").html('<span onclick="baiduPosition(35)" style="color: #f05156;"><img src="../../images/v2/indexrefresh@2x.png">定位获取失败,请点击重试</span>');
        }
    }, {
        enableHighAccuracy: true
    });
};

function translateCallback(lng, lat) {
    var latlon = lat + ',' + lng;
    var url = "http://api.map.baidu.com/geocoder/v2/?ak=申请的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">定位获取失败,请点击重试</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">定位获取失败,请点击重试</span>');
        }
    });
}

wed端 百度地图获取当前所在城市

功能说明：

HTML

JS

wed端百度地图获取当前所在城市