地理定位原理簡解及推薦Cordova插件使用

看到群友在折騰地理定位卷要,簡單寫一下,不過是基于一段時間前的經(jīng)驗独榴,權(quán)做參考吧僧叉。

首先我們了解一下地理定位的基本知識:

手機定位方式

定位即獲取用戶當前經(jīng)緯度,手機定位方式常見有三種:

  1. GPS/北斗:根據(jù)系統(tǒng)GPS/北斗模塊通過與衛(wèi)星通信實時計算獲取經(jīng)緯度棺榔,精度10-100米左右,限制是容易受環(huán)境影響症歇,在室內(nèi)幾乎不起作用郎笆。
  2. 基站:根據(jù)運營商基站位置計算經(jīng)緯度谭梗,基站可能離手機百米甚至上千米遠,所以誤差較大宛蚓,精度100-3000米不等激捏,限制是定位較慢,精度差凄吏。
  3. WIFI:根據(jù)周圍WIFI路由器位置計算經(jīng)緯度远舅,在城市范圍,網(wǎng)絡(luò)節(jié)點比較密集痕钢,所以城市精度高點图柏,精度100-200米左右,限制是受周圍WIFI數(shù)量和分布影響任连,需要打開手機WIFI開關(guān)蚤吹。

混合式應(yīng)用地理定位的方案

混合式應(yīng)用有兩種定位方案:

  1. 原生定位;
  2. 網(wǎng)頁定位随抠;

原生定位使用GPS/北斗定位裁着,網(wǎng)頁定位僅支持基站定位和WIFI定位兩種方式,自然優(yōu)先選型原生定位暮刃,但是,為了在一些影響GPS信號接收的地方提高精度爆土,現(xiàn)在的第三方定位SDK大多又引入了后兩種方式作為輔助定位補充椭懊。高德和百度就是加入輔助定位的優(yōu)化過的定位方式,其中百度的會比高德的準確一點步势。

Cordova封裝第三方原生定位SDK

IOS平臺都是通過系統(tǒng)SDK接口獲取的氧猬,因此所有App獲取定位及精度的能力是相同的,即使Google Maps坏瘩、百度地圖盅抚、高德地圖這種專業(yè)地圖App也是如此;而Android平臺由于Google Service被閹割導(dǎo)致該系統(tǒng)SDK無法正常使用倔矾,國內(nèi)App通常是通過高德妄均、百度等第三方SDK接口獲取定位信息,各定位能力和精度上會有些差異哪自。所以丰包,如果搜索Github上的源碼,發(fā)現(xiàn)大多Cordova定位插件只封裝第三方SDK的Android版本壤巷。如果IOS需要定位功能邑彪,則大多會選用apache的通用Corodva定位插件cordova-plugin-geolocation。換句話說胧华,對于不少混合式應(yīng)用來說寄症,使用如下的組合方案:

Android上第三方定位SDK封裝的Cordova插件 + IOS上使用cordova-plugin-geolocation宙彪。

在個人看來,上述方案有巧,cordova-plugin-geolocation只是調(diào)用了系統(tǒng)的SDK释漆,并不會像國內(nèi)第三方SDK那樣添加了輔助定位的功能,總覺得有欠缺剪决,更傾向于也接入第三方定位SDK灵汪,有部分網(wǎng)友也有我這種想法,所以也封裝了第三方定位IOS版插件柑潦,如:cordova-plugin-baidumaplocation享言。

對于這些兼容Android和IOS的Cordova插件又是如何考量的?我個人傾向于三個特點:小渗鬼、易用览露、新

  1. 如上述提到插件雖是較新的,但用的是百度地圖的庫譬胎,比較臃腫差牛,現(xiàn)在百度地圖把定位sdk獨立抽離了出來做成了百度定位sdk,所以如果它改成百度定位的庫我是比較樂意使用的堰乔。
  2. 百度和高德用誰好我也掙扎了一段時間偏化,最后選用高德,因為總體上镐侯,高德的文檔相對較好侦讨,API也比較清晰簡潔,對移動端的支持也更友好些(如提供有移動風格的城市列表選擇組件)苟翻。
  3. 現(xiàn)有的高德定位插件韵卤,大多不維護了,使用的第三方庫都是2年或以上崇猫,比較舊沈条,所以我造了個輪子:cordova-location-amap——但我也沒有維護了……

數(shù)據(jù)偏移之互聯(lián)網(wǎng)地圖坐標系

有時候通過定位獲取的經(jīng)緯度并不是適用所有地圖的,如高德定位獲取到的經(jīng)緯度是不能在百度地圖上正確打點的诅炉,因為地圖使用了不同的坐標系蜡歹,常見的互聯(lián)網(wǎng)地圖坐標系有下面三種:

WGS84(GPS)

國際標準,一般從國際標準的GPS設(shè)備獲取的坐標都是WGS84涕烧,以及國際地圖提供商使用的坐標系季稳。

GCJ02

中國標準,國測局02年發(fā)布的坐標系澈魄。又稱“火星坐標”景鼠。在中國,基于安全需要,必須至少使用“GCJ02”對地理位置進行加偏處理铛漓,把真實的坐標加密成虛假的坐標溯香。比如谷歌中國、高德浓恶、騰訊都在用這個坐標系玫坛。

BD09

百度標準。 除了火星坐標系統(tǒng)包晰,不同的地圖數(shù)據(jù)商也可能使用自己的坐標系統(tǒng)湿镀。百度就在“GCJ02”的基礎(chǔ)上進行二次加密。

所以跨地圖數(shù)據(jù)共享伐憾,一般有相應(yīng)的糾偏算法勉痴,如百度和高德的坐標轉(zhuǎn)換:

/**
   * 高德坐標轉(zhuǎn)百度
   * @param gg_lon 經(jīng)度
   * @param gg_lat 緯度
   */
  gaode2baidu(gg_lon, gg_lat): {
    longitude: number,
    latitude: number
  } {  
    if(gg_lon || gg_lat){
      return {
        longitude: gg_lon,
        latitude: gg_lat
      }
    }
    var X_PI = Math.PI * 3000.0 / 180.0;  
    var x = gg_lon, y = gg_lat;  
    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);  
    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);  
    var bd_lon = z * Math.cos(theta) + 0.0065;  
    var bd_lat = z * Math.sin(theta) + 0.006;  
    return {  
      longitude: parseFloat(bd_lon.toFixed(6)),
      latitude: parseFloat(bd_lat.toFixed(6))
    };  
  }  

  /**
   * 百度坐標轉(zhuǎn)高德
   * @param bd_lon 經(jīng)度
   * @param bd_lat 緯度
   */
  baidu2gaode(bd_lon, bd_lat): {
    longitude: number,
    latitude: number
  } {  
    if(bd_lon || bd_lat){
      return {
        longitude: bd_lon,
        latitude: bd_lat
      }
    }
    var X_PI = Math.PI * 3000.0 / 180.0;  
    var x = bd_lon - 0.0065;  
    var y = bd_lat - 0.006;  
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);  
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);  
    var gg_lon = z * Math.cos(theta);  
    var gg_lat = z * Math.sin(theta);  
    return {  
      longitude: parseFloat(gg_lon.toFixed(6)),  
      latitude: parseFloat(gg_lat.toFixed(6))  
    }  
  }  

綜合上述知識,可以得出使用單一的定位功能树肃,也可以通過坐標轉(zhuǎn)換算法兼容各種地圖服務(wù)蒸矛,也就是說可以使用原生定位功能,結(jié)合網(wǎng)頁地圖實現(xiàn)地圖應(yīng)用胸嘴,如我就是下面的方式使用:

    "cordova-location-amap": "^1.0.1",
    "cordova-plugin-android-permissions": "^1.0.0",

  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=3e1376d2e1aeff"></script>
  <!-- UI組件庫 1.0 -->
  <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

ionic中簡單示例操作:

  1. 去地圖服務(wù)商申請原生和Web版等key雏掠;
  2. 安裝基于對應(yīng)地圖服務(wù)商的Cordova插件,變量填入申請的key劣像;
  3. 在index.html中添加上述js文件乡话,然后在具體的某個頁面,如home.page.html中添加代碼(注意指定寬高耳奕,不然可能地圖出來了绑青,但是卻看不多,自己還找半天):
  <div id="container" style="width:100%;height:100%">
  </div>
  1. home.page.ts添加初始化地圖代碼:
declare let AMap: any;
declare let Zepto: any;
declare let AMapUI: any; 
loadMap() {
    if(typeof (AMapUI) == "undefined" || typeof (Zepto) == "undefined"){
      return;
    }
    // 設(shè)置DomLibrary
    AMapUI.setDomLibrary(Zepto);
    if (typeof (AMap) != "undefined") {
      const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10,
        center: this.center
      });
      this.map = map;
      // 加載BasicControl吮铭,loadUI的路徑參數(shù)為模塊名中 'ui/' 之后的部分
      AMapUI.loadUI(['control/BasicControl'], (BasicControl)=> {
        // 縮放控件
        this.map.addControl(new BasicControl.Zoom({
            position: 'lt', //left top时迫,左上角
            showZoomNum: true // 顯示zoom值
        }));
      });
    }
  }
  1. 調(diào)用原生定位功能:
cordova.plugins.aMapLocation.getCurrentPosition(this.configNative,
              (locate: {
                city: string,
                longitude: number,
                latitude: number
              }) => {
               console.log(locate);
              },
              e => {
               console.log(e);
              }
);

基本調(diào)用就這樣子了颅停,省卻部分谓晌,僅提供主要代碼,如地圖key申請等請自行搜索癞揉。

定位方案不是唯一的纸肉,有的網(wǎng)頁定位的接口,會嘗試判斷是否安裝有自家的原生地圖應(yīng)用喊熟,有就借用其定位柏肪,沒有就使用網(wǎng)頁定位,有機會的也可以了解一下芥牌。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末烦味,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谬俄,老刑警劉巖柏靶,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異溃论,居然都是意外死亡屎蜓,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門钥勋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炬转,“玉大人,你說我怎么就攤上這事算灸《笈” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵乎婿,是天一觀的道長测僵。 經(jīng)常有香客問我,道長谢翎,這世上最難降的妖魔是什么捍靠? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮森逮,結(jié)果婚禮上榨婆,老公的妹妹穿的比我還像新娘。我一直安慰自己褒侧,他們只是感情好良风,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著闷供,像睡著了一般烟央。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上歪脏,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天疑俭,我揣著相機與錄音,去河邊找鬼婿失。 笑死钞艇,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的豪硅。 我是一名探鬼主播哩照,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼懒浮!你這毒婦竟也來了飘弧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎次伶,沒想到半個月后蹋岩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡学少,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年剪个,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片版确。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡扣囊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出绒疗,到底是詐尸還是另有隱情侵歇,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布吓蘑,位于F島的核電站惕虑,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏磨镶。R本人自食惡果不足惜溃蔫,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琳猫。 院中可真熱鬧伟叛,春花似錦、人聲如沸脐嫂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽账千。三九已至侥蒙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間匀奏,已是汗流浹背鞭衩。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留攒射,地道東北人醋旦。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓恒水,卻偏偏與公主長得像会放,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子钉凌,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 今天本來娛樂記者不應(yīng)該忙的咧最,至少不應(yīng)該這么忙。 但舒淇不合時宜地占據(jù)了頭條。 本熊主業(yè)是讀武俠矢沿,想想舒淇像誰呢滥搭?可...
    德萬托阿閱讀 333評論 0 5
  • 我喜歡秋天,所以關(guān)于這里的故事我想從這個美麗的季節(jié)開始捣鲸。 這是我嫁近大孟莊的第七個年頭瑟匆,女兒六歲,叫孟芝栽惶,小名知了...
    春秋無雪閱讀 285評論 0 0
  • 為什么最近不想上班外厂? 最近意氣消沉冕象、郁悶,抵制上班汁蝶,情緒低落渐扮,總是犯困?那你很可能患了“五月病”掖棉。 五月病墓律,又稱季...
    馮佩佩在哪里閱讀 549評論 0 1
  • 關(guān)于夢想,我一直不敢相信幔亥,努力就能成功的鬼話只锻。因為這個世界很詭異,有時候一個人很努力毀掉他的紫谷,是這個社會齐饮。但是不代...
    孤獨是孤獨者的盛裝閱讀 243評論 0 1