H5結合百度map實現GPS定位

前言

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

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

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

H5 GPS定位

 1  (function () {
 2         var
 3             isGeolocation = false,
 4             lat = 0,
 5             lng = 0,
 6             coords = null;
 7             
 8         if (navigator.geolocation) { isGeolocation = true; };
 9         if (isGeolocation) {
10             function getPosSuccess(position) {
11                 coords = position.coords;
12                 lat = coords.latitude, lng = coords.longitude;
13                 $.ajax({
14                     type: 'GET',
15                     dataType: 'json',
16                     url: '/Home/GetPositionArea',
17                     data: { 'lat': lat, 'lng': lng },
18                     success: function (data) {
19 
20                     }
21                 });
22             };
23             function getPosError(err) {
24                 switch (err) {
25                     case err.PERMISSION_DENIED:
26                         console.log("您拒絕了共用位置，可手動選擇城市。");
27                         break;
28                     case err.POSITION_UNAVAILABLE:
29                         console.log("無法獲取當前位置");
30                         break;
31                     case err.TIMEOUT:
32                         console.log("獲取位置超時");
33                         break;
34                     default:
35                         console.log("未知錯誤");
36                         break;
37                 }
38                 
39             };
40             navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);
41         } else {
42             
43         };
44 
45     })();

結合百度介面查詢具體城市

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);
  }