uniapp打開地圖直接獲取位置的實(shí)現(xiàn)代碼
更新時(shí)間：2024年08月03日 11:40:47 作者：愿?
這篇文章主要介紹了uniapp打開地圖直接獲取位置的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
uniapp打開地圖直接獲取位置
uniapp官網(wǎng)文檔
<view class="map-content" @click.stop="kilometer(item)">
<view class="km">
{{item.distance||'0'}}km
</view>
</view>import map from '../../utils/map.js'
onLoad() {
let that = this
let addressInfo = getApp().globalData.addressInfo;
if (addressInfo) {
that.addressInfo = addressInfo
that.getOilList()
} else {
//這里是獲取地理位置
map.loadCity().then(res => {
that.addressInfo = getApp().globalData.addressInfo
that.getOilList()
});
}
},
// 點(diǎn)擊獲取地圖
kilometer(e) {
uni.openLocation({
longitude: Number(e.lng),
latitude: Number(e.lat),
name: e.name,
address: e.address
})
},map.js頁面對地理位置進(jìn)行封裝
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
var qqmapsdk = {};
// 獲取位置授權(quán)
async function loadCity() {
let that = this;
return new Promise(function (resolve, reject) {
uni.getSetting({
success: (res) => {
// res.authSetting['scope.userLocation'] == undefined 表示 初始化進(jìn)入該頁面
// res.authSetting['scope.userLocation'] == false 表示 非初始化進(jìn)入該頁面,且未授權(quán)
// res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán)
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
uni.showModal({
title: '請求授權(quán)當(dāng)前位置',
content: '需要獲取您的地理位置，請確認(rèn)授權(quán)',
success: function (res) {
if (res.cancel) {
uni.showToast({
title: '拒絕授權(quán)',
icon: 'none',
duration: 1000
})
reject(false);
} else if (res.confirm) {
uni.openSetting({
success: function (dataAu) {
if (dataAu.authSetting["scope.userLocation"] == true) {
uni.showToast({
title: '授權(quán)成功',
icon: 'success',
duration: 1000
})
that.getLocation().then(function (res) {
if (res) {
resolve(true);
} else {
reject(false);
}
});
} else {
uni.showToast({
title: '授權(quán)失敗',
icon: 'none',
duration: 1000
})
reject(false);
}
}
})
}
}
})
} else if (res.authSetting['scope.userLocation'] == undefined) {
that.getLocation().then(function (res) {
if (res) {
resolve(true);
} else {
reject(false);
}
});
} else {
that.getLocation().then(function (res) {
if (res) {
resolve(true);
} else {
reject(false);
}
});
}
}
})
}).catch((e) => {})
}
//坐標(biāo)獲取城市
function getLocation() {
let vm = this;
return new Promise(function (resolve, reject) {
uni.getLocation({
type: 'wgs84',
success: function (res) {
getApp().globalData.latitude = res.latitude;
getApp().globalData.longitude = res.longitude;
uni.setStorageSync("longitude", res.longitude)
uni.setStorageSync("latitude", res.latitude)
vm.getLocal().then(function (res) {
if (res) {
resolve(true);
} else {
reject(false);
}
});
},
fail: function (res) {
reject(false);
}
})
}).catch((e) => {})
}
// 坐標(biāo)轉(zhuǎn)換地址
function getLocal() {
let vm = this;
return new Promise(function (resolve, reject) {
qqmapsdk = new QQMapWX ({
key: 'asdfghjklqwertyuiop' //這里自己的key秘鑰進(jìn)行填充
});
qqmapsdk.reverseGeocoder({
location: {
latitude: getApp().globalData.latitude,
longitude: getApp().globalData.longitude
},
success: function (res) {
getApp().globalData.addressInfo = res.result.address_component;
resolve(true);
},
fail: function (res) {
reject(false);
}
});
}).catch((e) => {})
}
function calculateDistance(latitude, longitude) {
let vm = this;
return new Promise(function (resolve, reject) {
qqmapsdk = new QQMapWX ({
key: 'asdfghjklqwertyuiop' //這里自己的key秘鑰進(jìn)行填充
});
qqmapsdk.calculateDistance({
to: [{
latitude: latitude, //商家的緯度
longitude: longitude, //商家的經(jīng)度
}],
success: function (res) {
resolve(res);
},
fail: function (res) {
reject(res);
}
});
}).catch((e) => {})
}
function selectLocation() {
let that = this;
return new Promise(function (resolve, reject) {
uni.getSetting({
success(res) {
// 只返回用戶請求過的授權(quán)
let auth = res.authSetting;
if (auth['scope.userLocation']) {
// 已授權(quán)，申請定位地址
resolve(true)
} else if (auth['scope.userLocation'] === undefined) {
// 用戶沒有請求過的授權(quán)，不需要我們主動(dòng)彈窗，微信會(huì)提供彈窗
resolve(true)
} else if (!auth['scope.userLocation']) {
// 沒有授權(quán)過，需要用戶重新授權(quán)
// 這個(gè)彈窗是為了實(shí)現(xiàn)點(diǎn)擊，不然openSetting會(huì)失敗
uni.showModal({
title: '是否授權(quán)當(dāng)前位置？',
content: '需要獲取您的地理位置，請確認(rèn)授權(quán)，否則定位功能將無法使用',
success: res => {
if (res.confirm) {
uni.openSetting({
success(res) {
let setting = res.authSetting;
if (!setting['scope.userLocation']) {
uni.showToast({
title: '地址授權(quán)失敗，定位功能無法使用',
icon: 'none',
});
reject(false)
} else {
// 地址授權(quán)成功，申請定位地址
resolve(true)
}
},
fail(err) {
// 需要點(diǎn)擊，有時(shí)候沒有點(diǎn)擊，是無法觸發(fā)openSetting
console.log('open-setting-fail', err);
reject(false)
}
});
}
}
});
}
}
});
}).catch((e) => {})
}
module.exports = {
loadCity,
getLocation,
getLocal,
getLocation,
selectLocation,
calculateDistance
}到此這篇關(guān)于uniapp打開地圖直接獲取位置的文章就介紹到這了,更多相關(guān)uniapp獲取地圖位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
函數(shù)式編程 是一種 編程規(guī)范，也是一種對語言程序（比如JavaScript）本身能力的 運(yùn)用方式。本篇文章將從 編程規(guī)范 來介紹函數(shù)式編程的到底是一種什么樣的規(guī)范，希望對大家有所幫助2023-02-02
偶然發(fā)現(xiàn)盛大通行證上的身份證驗(yàn)證代碼，特扒下來，方便大家的使用。2011-01-01
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽圖片效果，JS實(shí)現(xiàn)圖標(biāo)圖拖拽，拖拽的過程中不斷輸出該div的left、top值，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript字符串_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript中的字符串就是用''或""括起來的字符表示。下面通過本文給大家介紹JavaScript字符串的相關(guān)知識，感興趣的朋友一起看看吧2017-06-06
注冊模塊中輸入密碼需要顯示密碼強(qiáng)度（低中高）本例將做的效果給大家分享下2014-06-06
webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)
我們每次改完要打包的資源文件，和配置文件都是是輸入npx webpack命令手動(dòng)打包的，本文就來介紹一下webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-07-07
購物車前端開發(fā)（jQuery和bootstrap3）
針對購物車的操作，進(jìn)行產(chǎn)品數(shù)量的增加減少，刪除購物車中產(chǎn)品項(xiàng)，本文使用JQuery1.11和bootstrap3進(jìn)行購物車開發(fā)，感興趣的小伙伴們2016-08-08
這篇文章主要介紹了threejs?模型添加文字的幾種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記
這篇文章主要介紹了javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記,需要的朋友可以參考下2015-02-02
原生js實(shí)現(xiàn)autocomplete插件
這篇文章主要介紹了原生js實(shí)現(xiàn)autocomplete插件的相關(guān)資料,需要的朋友可以參考下2016-04-04