微信小程序開發(fā)之獲取當(dāng)前位置所在的城市

由于微信小程序只提供了獲取地理位置(經(jīng)緯度)侨嘀、速度的api臭挽,并沒有獲取地理位置的信息。因此咬腕,我們需要利用第三方地圖api來解決這個問題欢峰。

一、原理
通過調(diào)用wx.getLocation()獲取到設(shè)備當(dāng)前所在地理位置的經(jīng)緯度涨共。再申請一個第三方地圖api的ak(訪問應(yīng)用)纽帖,然后通過ajax請求把ak和經(jīng)緯度傳給第三方服務(wù)端,該服務(wù)端返回地理位置信息(如廣東省廣州市白云區(qū))举反。

二抛计、效果圖

三、實現(xiàn)過程
這里使用了百度地圖的api照筑,進入百度地圖開發(fā)平臺吹截,創(chuàng)建一個應(yīng)用,申請一個ak凝危。

然后調(diào)用wx.getLocation()獲取到設(shè)備當(dāng)前的經(jīng)緯度波俄。然后用ajax把ak和經(jīng)緯度(lat<緯度>,lng<經(jīng)度>)傳給百度地圖服務(wù)端即可。

getCity: function(e) {
    var that = this;
    console.log(e);
    //返回true和false
    console.log(e.detail.value);
    //選中狀態(tài)
    if (e.detail.value){
      wx.showLoading({
        title: '加載中',
      });
      wx.getLocation({
        success: function (res) {
          console.log(res);
          console.log(res.latitude);
          console.log(res.longitude);
          const url= 'http://api.map.baidu.com/geocoder/v2/';
          const ak = '填上自己申請的ak';
          //小程序的ajax請求需要在后臺安全域名配置增加 開發(fā)測試中在詳情里勾選-不校驗合法域名即可
          wx.request({
            url,
            data: {
              ak,
              location: `${res.latitude},${res.longitude}`,
              output: 'json',  //格式
            },
            success: function (res){
              console.log(res);
              if(res.data.status == "0"){
                that.setData({
                  province: res.data.result.addressComponent.province,
                  city: res.data.result.addressComponent.city,
                  district: res.data.result.addressComponent.district,
                  isShow: true
                });
                wx.hideLoading()
              }else{
                that.setData({
                  unGeo: '未知位置',
                  isShow: false
                });
                wx.hideLoading()
              }
            }
          })
        }
      })
    }
}

好了蛾默,很簡單的一個案例~


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末懦铺,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子支鸡,更是在濱河造成了極大的恐慌冬念,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牧挣,死亡現(xiàn)場離奇詭異急前,居然都是意外死亡,警方通過查閱死者的電腦和手機瀑构,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門裆针,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人寺晌,你說我怎么就攤上這事世吨。” “怎么了呻征?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵耘婚,是天一觀的道長。 經(jīng)常有香客問我陆赋,道長沐祷,這世上最難降的妖魔是什么嚷闭? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮戈轿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阵子。我一直安慰自己思杯,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布挠进。 她就那樣靜靜地躺著色乾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪领突。 梳的紋絲不亂的頭發(fā)上暖璧,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天,我揣著相機與錄音君旦,去河邊找鬼澎办。 笑死,一個胖子當(dāng)著我的面吹牛金砍,可吹牛的內(nèi)容都是我干的局蚀。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼恕稠,長吁一口氣:“原來是場噩夢啊……” “哼琅绅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起鹅巍,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤千扶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后骆捧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澎羞,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年敛苇,在試婚紗的時候發(fā)現(xiàn)自己被綠了煤痕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡接谨,死狀恐怖摆碉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脓豪,我是刑警寧澤巷帝,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站扫夜,受9級特大地震影響楞泼,放射性物質(zhì)發(fā)生泄漏驰徊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一堕阔、第九天 我趴在偏房一處隱蔽的房頂上張望棍厂。 院中可真熱鬧,春花似錦超陆、人聲如沸牺弹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽张漂。三九已至,卻和暖如春谨娜,著一層夾襖步出監(jiān)牢的瞬間航攒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工趴梢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留漠畜,地道東北人。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓坞靶,卻偏偏與公主長得像盆驹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子滩愁,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,955評論 2 355