H5結合百度map實現GPS定位

前言

     目前我們做m端時都會用到定位，當用戶第一次打開h5頁面時會啟動gps定位，並結合百度map來查找城市。按照我們的邏輯思路就是gps定位獲取經緯度，傳到后台調用百度的一個接口查找城市名稱。

     1、查詢得到城市名稱，我們根據城市名稱在我們自己的數據庫里再查詢對應的城市id（查詢會很頻繁，可以基於xml 緩存查詢，也可以放到redis里）

     2、為了保險起見，我們也會在自己的庫里根據經緯度維護一套城市信息，防止接口不可用時不影響定位。

 

H5 GPS定位

 (function () {
        var
            isGeolocation = false,
            lat = 0,
            lng = 0,
            coords = null;
            
        if (navigator.geolocation) { isGeolocation = true; };
        if (isGeolocation) {
            function getPosSuccess(position) {
                coords = position.coords;
                lat = coords.latitude, lng = coords.longitude;
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/Home/GetPositionArea',
                    data: { 'lat': lat, 'lng': lng },
                    success: function (data) {

                    }
                });
            };
            function getPosError(err) {
                switch (err) {
                    case err.PERMISSION_DENIED:
                        console.log("您拒絕了共享位置，可手動選擇城市。");
                        break;
                    case err.POSITION_UNAVAILABLE:
                        console.log("無法獲取當前位置");
                        break;
                    case err.TIMEOUT:
                        console.log("獲取位置超時");
                        break;
                    default:
                        console.log("未知錯誤");
                        break;
                }
                
            };
            navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);
        } else {
            
        };

    })();

 

結合百度接口查詢具體城市

public JsonResult GetPositionArea(decimal lng, decimal lat)
 {
            string api =
                string.Format(
                    "http://api.map.baidu.com/geocoder/v2/?output=json&ak=XXXXX&location={0},{1}",
                    lat, lng);  //傳入自己的業務參數ak

            string result = HttpRequestHelper.Get(api);

            return Json(result, JsonRequestBehavior.AllowGet);
  }