uniapp打开地图直接获取位置的实现代码
更新时间：2024年08月03日 11:40:47 作者：愿➣
这篇文章主要介绍了uniapp打开地图直接获取位置的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
uniapp打开地图直接获取位置
uniapp官网文档
<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()
});
}
},
// 点击获取地图
kilometer(e) {
uni.openLocation({
longitude: Number(e.lng),
latitude: Number(e.lat),
name: e.name,
address: e.address
})
},map.js页面对地理位置进行封装
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
var qqmapsdk = {};
// 获取位置授权
async function loadCity() {
let that = this;
return new Promise(function (resolve, reject) {
uni.getSetting({
success: (res) => {
// res.authSetting['scope.userLocation'] == undefined 表示 初始化进入该页面
// res.authSetting['scope.userLocation'] == false 表示 非初始化进入该页面,且未授权
// res.authSetting['scope.userLocation'] == true 表示 地理位置授权
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: function (res) {
if (res.cancel) {
uni.showToast({
title: '拒绝授权',
icon: 'none',
duration: 1000
})
reject(false);
} else if (res.confirm) {
uni.openSetting({
success: function (dataAu) {
if (dataAu.authSetting["scope.userLocation"] == true) {
uni.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
that.getLocation().then(function (res) {
if (res) {
resolve(true);
} else {
reject(false);
}
});
} else {
uni.showToast({
title: '授权失败',
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) => {})
}
//坐标获取城市
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) => {})
}
// 坐标转换地址
function getLocal() {
let vm = this;
return new Promise(function (resolve, reject) {
qqmapsdk = new QQMapWX ({
key: 'asdfghjklqwertyuiop' //这里自己的key秘钥进行填充
});
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秘钥进行填充
});
qqmapsdk.calculateDistance({
to: [{
latitude: latitude, //商家的纬度
longitude: longitude, //商家的经度
}],
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) {
// 只返回用户请求过的授权
let auth = res.authSetting;
if (auth['scope.userLocation']) {
// 已授权，申请定位地址
resolve(true)
} else if (auth['scope.userLocation'] === undefined) {
// 用户没有请求过的授权，不需要我们主动弹窗，微信会提供弹窗
resolve(true)
} else if (!auth['scope.userLocation']) {
// 没有授权过，需要用户重新授权
// 这个弹窗是为了实现点击，不然openSetting会失败
uni.showModal({
title: '是否授权当前位置？',
content: '需要获取您的地理位置，请确认授权，否则定位功能将无法使用',
success: res => {
if (res.confirm) {
uni.openSetting({
success(res) {
let setting = res.authSetting;
if (!setting['scope.userLocation']) {
uni.showToast({
title: '地址授权失败，定位功能无法使用',
icon: 'none',
});
reject(false)
} else {
// 地址授权成功，申请定位地址
resolve(true)
}
},
fail(err) {
// 需要点击，有时候没有点击，是无法触发openSetting
console.log('open-setting-fail', err);
reject(false)
}
});
}
}
});
}
}
});
}).catch((e) => {})
}
module.exports = {
loadCity,
getLocation,
getLocal,
getLocation,
selectLocation,
calculateDistance
}到此这篇关于uniapp打开地图直接获取位置的文章就介绍到这了,更多相关uniapp获取地图位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了bootstrap Table的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本篇文章主要是对js设置文本框中焦点位置在最后的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能2024-06-06
这篇文章主要为大家详细介绍了JS实现瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
由于公司官网采用的是dreamwaver / fireworks 內建的弹出式菜单的JS,在IE7下发现菜单项文字显示都变成一排,无法正确浏览.2009-10-10
package.json与package-lock.json的区别及详细解释
不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.json,package-lock.json,应该很多人平时都不会去关注这两个文件有啥关系吧,这篇文章主要给大家介绍了关于package.json与package-lock.json的区别及详细解释,需要的朋友可以参考下2022-08-08
UTC格式时间想必大家并不陌生，那么怎么可以将其转换为本地格式呢？其实很简单，下面的方法会帮助大家实现这一想法2013-09-09
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了Fuse.js模糊查询算法学习指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家介绍了关于JavaScript块级作用域绑定以及状态提升的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
最新评论