小程序使用騰訊地圖定位當(dāng)前城市

這個迭代使用mpvue框架開發(fā)了小程序。對于之前一直用vue來開發(fā)web項(xiàng)目的我來說邑彪,有這么一個框架來開發(fā)小程序真的是很激動啊宣虾,提升了很多開發(fā)效率。

這里記錄一下在小程序中使用騰訊地圖來定位當(dāng)前城市的功能隅很。

首先會有一個授權(quán)提示:
image.png

分析一下思路:


image.png

接下來需要做的事情如下:

1撞牢、接入騰訊地圖SDK

文檔地址:https://lbs.qq.com/qqmap_wx_jssdk/index.html
按照文檔的步驟來:

image.png

前3步都很簡單,第4步需要注意一點(diǎn)的就是叔营,如果你是在開發(fā)工具調(diào)試的話屋彪,可以直接勾選這個使用:
image.png

但是,如果要發(fā)體驗(yàn)版或者發(fā)布正式環(huán)境了之后绒尊,就要加上合法域名了畜挥,不然使用不了。添加合法域名就是在小程序的管理后臺這個地方加入即可婴谱。


image.png

準(zhǔn)備工作就是這么多⌒返現(xiàn)在可以寫代碼了躯泰。

2、引入核心代碼华糖,并初始化
//qqmap-wx-jssdk.min.js是下載下來的包麦向,放在utils 或者static目錄下都行
let QQMapWX = require('../../../../static/js/qqmap-wx-jssdk.min.js')
let qqmapsdk
export default {
 data() {
  return {
    city: '',
    userLocation: {
      latitude: '',
      longitude: ''
    }
  }
},
onLoad() {
  qqmapsdk = new QQMapWX({
    key: 'xxxxxxxxxxxxxxxxxxxx' // 申請的key
  })
  this.getUserLocation()  //獲取用戶定位
  }
},
methods: {
  getUserLocation() {
    wx.getSetting({  //獲取用戶授權(quán)情況
      success: res => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { // 用戶非首次訪問,且曾經(jīng)拒絕過授權(quán)客叉,此時(shí)res.authSetting['scope.userLocation'] 一般返回false
          //這里是跳轉(zhuǎn)開啟定位頁面诵竭,引導(dǎo)用戶授權(quán)的代碼
          return false
        }
        this.getLocation() //繼續(xù)下一步
      },
      fail: () => {
        Utils.showToast('網(wǎng)絡(luò)錯誤:獲取用戶授權(quán)信息失敗兼搏!')
      }
    })
  }卵慰,
  getLocation() {
    wx.getLocation({  // 這一步 如果用戶是首次訪問,則會彈出授權(quán)彈窗
      type: 'gcj02',
      success: res => {
        this.userLocation = res  // res包含經(jīng)緯度信息
        this.getLocal()  //繼續(xù)下一步
      },
      fail: res => {
        if (res.errMsg == 'getLocation:fail 1' || res.errMsg == 'getLocation:fail system permission denied') { 
            // 用戶允許授權(quán)但獲取位置失敗向族,可能有多種原因呵燕,比如網(wǎng)絡(luò)原因、手機(jī)系統(tǒng)拒絕使用定位
            //這里寫相應(yīng)的代碼
        } else if (res.errMsg == 'getLocation:fail auth deny' || res.errMsg == 'getLocation:fail:auth denied') {
            // 用戶拒絕了授權(quán)件相,跳去開啟定位頁面引導(dǎo)授權(quán)的代碼
        } else { // 別的錯誤
            Utils.showToast('網(wǎng)絡(luò)錯誤:獲取用戶所在位置經(jīng)緯度失斣倥ぁ!')
        }
      }
    })
  },
  getLocal() {
    qqmapsdk.reverseGeocoder({
        location: {
            latitude: this.userLocation.latitude,
            longitude: this.userLocation.longitude
        },
        success: res => {
            this.userLocation = {
                ...this.userLocation,
                ...res.result
            }
            this.city = this.userLocation.address_component.city
            this.city = this.city.replace('市', '')  // 深圳夜矗、廣州
        },
        fail: error => {
            Utils.showToast(error.message)
        }
    })
  }
}

整個流程就是這樣泛范,記錄下來加深記憶的同時(shí)希望能幫助到需要的朋友,如果寫得不明白或者看不懂的歡迎留言紊撕。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末罢荡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子对扶,更是在濱河造成了極大的恐慌区赵,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浪南,死亡現(xiàn)場離奇詭異笼才,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)络凿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門骡送,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人絮记,你說我怎么就攤上這事摔踱。” “怎么了怨愤?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵派敷,是天一觀的道長。 經(jīng)常有香客問我,道長篮愉,這世上最難降的妖魔是什么般眉? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮潜支,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘柿汛。我一直安慰自己冗酿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布络断。 她就那樣靜靜地躺著裁替,像睡著了一般。 火紅的嫁衣襯著肌膚如雪貌笨。 梳的紋絲不亂的頭發(fā)上弱判,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音锥惋,去河邊找鬼昌腰。 笑死,一個胖子當(dāng)著我的面吹牛膀跌,可吹牛的內(nèi)容都是我干的遭商。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼捅伤,長吁一口氣:“原來是場噩夢啊……” “哼劫流!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起丛忆,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤祠汇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后熄诡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體可很,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年粮彤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了根穷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡导坟,死狀恐怖屿良,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惫周,我是刑警寧澤尘惧,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站递递,受9級特大地震影響喷橙,放射性物質(zhì)發(fā)生泄漏啥么。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一贰逾、第九天 我趴在偏房一處隱蔽的房頂上張望悬荣。 院中可真熱鬧,春花似錦疙剑、人聲如沸氯迂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嚼蚀。三九已至,卻和暖如春管挟,著一層夾襖步出監(jiān)牢的瞬間轿曙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工僻孝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留导帝,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓穿铆,卻偏偏與公主長得像舟扎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子悴务,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349