小程序引入騰訊地圖API 完整過程

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');? //lib 文件夾里是騰訊封裝好的api 直接去官網(wǎng)下載解壓

//用戶點擊導(dǎo)航按鈕之后一系列的騷操作

goMap(){

? ? var that = this;

//判斷用戶手機系統(tǒng)有沒有開啟定位服務(wù)

wx.getSystemInfo({

? success(res) {

? var isopendingwei = res.locationEnabled;

? if(isopendingwei==false){

? wx.showToast({

? ? title: '請開啟手機定位功能!',

? ? icon: 'none',

? ? duration: 2000

? })

? }else{

? ? // 手機開啟定位了

? ? wx.showLoading({

? ? title: '正在獲取位置...',

? })

? setTimeout(()=>{

? ? // const vm = this

//判斷小程序有沒有獲取定位權(quán)限沒有授權(quán)的情況用getSetting打開授權(quán)

? ? wx.getSetting({? ?

//如果已經(jīng)獲取定位權(quán)限就可以開始定位咯

? ? ? success: (res)=> {? ? ?

? ? ? ? // 1. scope.userLocation 為真观蜗，代表用戶已經(jīng)授權(quán)

? ? ? ? if (res.authSetting['scope.userLocation']) {

? ? ? ? ? // 使用 JavaScript SDK 獲取目的地經(jīng)緯度

? ? ? ? ? // 實例化API核心類

? ? ? ? let? qqmapsdk = new QQMapWX({

? ? ? ? ? ? ? key: '騰訊地圖申請的key'

? ? ? ? ? });

? // reverseGeocoder 為 QQMapWX 解析經(jīng)緯度的方法

? const latitude=Number(that.data.parkDetailData.latitude)

? const longitude=Number(that.data.parkDetailData.longitude)

? qqmapsdk.reverseGeocoder({

? ? ? location: { latitude,longitude},

? ? ? success:(res)=> {

? ? ? ? ? that.setData({

? ? ? ? ? ? ? ad_info: res.result.ad_info,

? ? ? ? ? ? ? city: `${res.result.address_component.province}${res.result.formatted_addresses.rough}`

? ? ? ? ? })

? ? ? ? ? console.log(res,"?看看解析成啥了")

? ? ? ? ? qqmapsdk.geocoder({

? ? ? ? ? ? // 寫入目的地名稱

? ? ? ? ? ? ? address: `${that.data.city}`,

? ? ? ? ? ? ? success:? (res)=> {

? ? ? ? ? ? ? ? ? console.log(res);

? ? ? ? ? ? ? ? ? var local = res.result.location;

? ? ? ? ? ? ? ? ? that.setData({

? ? ? ? ? ? ? ? ? ? ? latitude: local.lat,

? ? ? ? ? ? ? ? ? ? ? longitude: local.lng

? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? }

? ? ? ? ? })

? ? ? ? // 1.1 使用 getlocation 獲取用戶經(jīng)緯度位置

? ? ? ? wx.getLocation({

? ? ? ? ? ? success:(res)=>{

? ? ? ? ? ? ? ? // 1.2 獲取用戶位置成功后沃于，將會返回 latitude, longitude 兩個字段套鹅，代表用戶的經(jīng)緯度位置

? ? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? ? ? // 1.3 將獲取到的經(jīng)緯度傳值給 getAddress 解析出具體的地址

? ? ? ? ? ? ? ? wx.openLocation({

? ? ? ? ? ? ? ? ? latitude: Number(that.data.latitude),

? ? ? ? ? ? ? ? ? longitude: Number(that.data.longitude),

? ? ? ? ? ? ? ? ? scale: 28,

? ? ? ? ? ? ? ? ? // 這里也要寫目的地信息

? ? ? ? ? ? ? ? ? name: `${that.data.city}`, //打開后顯示的地址名稱

? ? ? ? ? ? ? })

? ? ? ? ? ? }

? ? ? ? })

? ? ? }

? })

? ? }else {

? ? ? ? ? ? // 2. 用戶未授權(quán)的情況下，可能會包含用戶第一次授權(quán)時點擊取消，就不能使用getSetting豫尽，要用openSetting來獲取授權(quán)

? ? ? ? ? ? wx.openSetting({

? ? ? ? ? ? ? ? success:(res)=> {

? ? ? ? ? ? ? ? ? ? // 2.1 如果二次授權(quán)允許了 userLocation 權(quán)限伪节，就再次執(zhí)行獲取位置的接口

? ? ? ? ? ? ? ? ? ? if (res.authSetting["scope.userLocation"]) {

? ? ? ? ? // 使用 JavaScript SDK 獲取目的地經(jīng)緯度

? ? ? ? ? // 實例化API核心類

? ? ? ? ? let? qqmapsdk = new QQMapWX({

? ? ? ? ? ? key: '騰訊地圖申請的key'

? ? ? ? });

// reverseGeocoder 為 QQMapWX 解析經(jīng)緯度的方法

const latitude=Number(that.data.parkDetailData.latitude)

const longitude=Number(that.data.parkDetailData.longitude)

qqmapsdk.reverseGeocoder({

? ? location: { latitude,longitude},

? ? success:(res)=> {

? ? ? ? that.setData({

? ? ? ? ? ? ad_info: res.result.ad_info,

? ? ? ? ? ? city: res.result.address

? ? ? ? })

? ? ? ? // console.log(this.data.ad_info,this.data.city,"?看看解析成啥了")

? ? ? ? qqmapsdk.geocoder({

? ? ? ? ? // 寫入目的地名稱

? ? ? ? ? ? address: `${that.data.city}`,

? ? ? ? ? ? success:? (res)=> {

? ? ? ? ? ? ? ? console.log(res);

? ? ? ? ? ? ? ? var local = res.result.location;

? ? ? ? ? ? ? ? that.setData({

? ? ? ? ? ? ? ? ? ? latitude: local.lat,

? ? ? ? ? ? ? ? ? ? longitude: local.lng

? ? ? ? ? ? ? ? })

? ? ? ? ? ? }

? ? ? ? })

? ? ? // 1.1 使用 getlocation 獲取用戶經(jīng)緯度位置

? ? ? wx.getLocation({

? ? ? ? ? success:(res)=>{

? ? ? ? ? ? ? // 1.2 獲取用戶位置成功后，將會返回 latitude, longitude 兩個字段厉颤，代表用戶的經(jīng)緯度位置

? ? ? ? ? ? ? console.log(res)

? ? ? ? ? ? ? // 1.3 將獲取到的經(jīng)緯度傳值給 getAddress 解析出具體的地址

? ? ? ? ? ? ? wx.openLocation({

? ? ? ? ? ? ? ? latitude: Number(that.data.latitude),

? ? ? ? ? ? ? ? longitude: Number(that.data.longitude),

? ? ? ? ? ? ? ? scale: 28,

? ? ? ? ? ? ? ? // 這里也要寫目的地信息

? ? ? ? ? ? ? ? name: `${that.data.city}`, //打開后顯示的地址名稱

? ? ? ? ? ? })

? ? ? ? ? }

? ? ? })

? ? }

})

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? }

? ? ? }

? ? })

? },2000)

? }

})?

? },