[百度地圖] 獲取用戶地理位置信息並解析成地址

時間 2019-11-06

標籤百度地圖獲取用戶地理位置信息並解地址简体版

原文原文鏈接

一、首先，去百度開放平臺註冊一個帳號，配置提供調用的akhtml

百度地圖開放平臺：http://lbsyun.baidu.com/android

在控制檯建立一個類別爲瀏覽器端的應用git

點擊設置，勾選須要的api，並配置安全訪問域名ajax

二、而後在須要使用百度地圖的頁面加上腳本標籤json

<script src="http://api.map.baidu.com/api?v=2.0&ak=百度提供"></script>

三、html頁面api

<body class="whitebg">
<header class="mui-bar-nav" onclick="rec_list()">
    <h1 class="mui-title" style="width:100%;">課程簽到</h1>
    <a href="#" class="mui-action-back  mui-pull-left" style="line-height:50px;">
    <span  class="mui-icon mui-icon-left-nav"></span>返回</a>
</header>
<div id="container"></div>
<div id="foot">
    <p class="sign">簽到</p>
    <p class="relocate">從新定位</p>
</div>
</body>

四、初始化地圖瀏覽器

$(function () {
    initMap();

    $(".sign").click(function () {
        getTSDistance();
    });

    $(".relocate").click(function () {
        relocate();
    });
});

var map = "";
function initMap() {

    //初始化地圖
    map = new BMap.Map("container");
    var point = new BMap.Point(120.38442818, 36.1052149);
    map.centerAndZoom(point, 15);
　　
　　//這段代碼能夠控制地圖在瀏覽器或者安卓手機下也可以精準定位到當前所在位置
　　//前提是使用https協議的網站
　　var navigationControl = new BMap.NavigationControl({

    　　type: BMAP_NAVIGATION_CONTROL_LARGE,
    　　enableGeolocation: true
　　});
　　map.addControl(navigationControl);




    //定位到當前地址
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        showLocationInMap(this.getStatus(), r);
    }, {enableHighAccuracy: true})
}

五、在地圖上展現當前位置安全

//地圖展現當前位置
var accuracy ="";
var longitude ="";
var latitude ="";
var actual_address ="";
function showLocationInMap(status, r) {

    if (status == BMAP_STATUS_SUCCESS) {//檢索成功。對應數值「0」。
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);

        //console.log(r.accuracy);
        //console.log(r.point.lng);
        //console.log(r.point.lat);
        accuracy = r.accuracy;
        longitude = r.point.lng;
        latitude = r.point.lat;


        //用所定位的經緯度查找所在地省市街道等信息
        var point = new BMap.Point(r.point.lng, r.point.lat);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            //console.log(rs.address);//地址信息
            actual_address = rs.address;
            var address = new BMap.Label(rs.address, {offset: new BMap.Size(-80, -25)});
            mk.setLabel(address); //添加地址標註
        });

    } else if (status == BMAP_STATUS_CITY_LIST) {//城市列表。對應數值「1」。
        common.alertMsg("城市列表", 0);
    } else if (status == BMAP_STATUS_UNKNOWN_LOCATION) {//位置結果未知。對應數值「2」。
        common.alertMsg("位置結果未知", 0);
    } else if (status == BMAP_STATUS_UNKNOWN_ROUTE) {//導航結果未知。對應數值「3」。
        common.alertMsg("導航結果未知", 0);
    } else if (status == BMAP_STATUS_INVALID_KEY) {//非法密鑰。對應數值「4」。
        common.alertMsg("非法密鑰", 0);
    } else if (status == BMAP_STATUS_INVALID_REQUEST) {//非法請求。對應數值「5」。
        common.alertMsg("非法請求", 0);
    } else if (status == BMAP_STATUS_PERMISSION_DENIED) {//沒有權限。對應數值「6」。(自 1.1 新增)
        common.alertMsg("沒有權限", 0);
    } else if (status == BMAP_STATUS_SERVICE_UNAVAILABLE) { //服務不可用。對應數值「7」。(自 1.1 新增)
        common.alertMsg("服務不可用", 0);
    } else if (status == BMAP_STATUS_TIMEOUT) {//超時。對應數值「8」。(自 1.1 新增)
        common.alertMsg("超時", 0);
    } else {
        common.alertMsg("未知錯誤", 0);
    }
}

由此獲得了經緯度，精確度和地址詳細信息微信

六、執行業務操做網站

/**
 * 點擊簽到，先獲取老師和目前定位地址的距離
 */
var distance = 0;
function getTSDistance(){

    $.ajax({
        type: "POST",
        url: rootPath + "/attendance/getAttendanceByAuId",
        data: {
            'att_user_id': att_user_id
        },
        dataType: "json",
        success: function (data) {
            console.log(data);
            if (data.isSuccess) {

                var tec_longitude = data.attendance.longitude;
                var tec_latitude = data.attendance.latitude;

                var pointTeacher = new BMap.Point(tec_longitude,tec_latitude);
                var pointStudent = new BMap.Point(longitude,latitude);
                distance = (map.getDistance(pointTeacher,pointStudent)).toFixed(2);

                //執行簽到
                sign();
            }
            else {
                common.alertMsg(data.msgCode, 0);
            }
        }
    });


}

/**
 * 簽到
 */
function sign() {
    common.alertMsg("正在簽到，請稍候...", 0);

    console.log(accuracy)
    console.log(longitude)
    console.log(latitude)
    console.log(actual_address)
    console.log(distance)

    $.ajax({
        type: "POST",
        url: rootPath + "/attendance/gpsSignIn",
        data: {
            'att_user_id': att_user_id,
            'accuracy': accuracy,
            'longitude': longitude,
            'latitude': latitude,
            'address': actual_address,
            'distance': distance
        },
        dataType: "json",
        success: function (data) {
            //console.log(data);
            if (data.isSuccess) {
                common.alertMsg("簽到成功，3秒後跳到列表頁", 0);
                setTimeout(rec_list,3000);
            }
            else {
                common.alertMsg(data.msgCode, 0);
            }
        }
    });
}

/**
 * 從新定位
 */
function relocate() {
    common.alertMsg("正在從新定位，請稍候...", 0);
    //定位到當前地址
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        showLocationInMap(this.getStatus(), r);
    }, {enableHighAccuracy: true})
    common.alertMsg("定位成功", 0);
}

七、存在的問題

網頁端和手機端定位差異較大，且手機端在微信訪問時，蘋果手機定位準確，android手機定位不許確。【待考證和解決】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。