当前位置: 首页 > news >正文

uniapp打开地图直接获取位置

在这里插入图片描述
uniapp官网文档

https://en.uniapp.dcloud.io/api/location/open-location.html

	<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 = thislet addressInfo = getApp().globalData.addressInfo;if (addressInfo) {that.addressInfo = addressInfothat.getOilList()} else {//这里是获取地理位置map.loadCity().then(res => {that.addressInfo = getApp().globalData.addressInfothat.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) {// 需要点击,有时候没有点击,是无法触发openSettingconsole.log('open-setting-fail', err);reject(false)}});}}});}}});}).catch((e) => {})
}module.exports = {loadCity,getLocation,getLocal,getLocation,selectLocation,calculateDistance
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • SpringBoot中的server.context-path
  • Spring Boot 整合 Dubbo3 + Nacos 2.4.0【进阶】+ 踩坑记录
  • docker部署hadoop集群
  • 3D,从无知到无畏
  • 使用ChatGPT4o+colab+gradio+huggingface1小时内,完成快速搭建任何AI应用程序或网站【详细教程步骤】建议收藏
  • 11个行为型模式
  • 【Python问题集锦】如何对不规则的时间序列进行对齐和插值
  • Sqlserver 备份表
  • 扩散模型系列笔记(一)——DDPM
  • 拦截指定http请求头,请求参数,请求方法,保存到本地
  • 左神学习笔记-岛屿数量问题(java版算法)
  • 堆排序以及向上、向下调整算法的时间复杂度推导及实现(超详细)
  • 五种创建springBoot项目的方法(本质上是三种)
  • FFmpeg学习
  • C语言从头学44——I/O 函数(一)
  • Apache Zeppelin在Apache Trafodion上的可视化
  • eclipse的离线汉化
  • IP路由与转发
  • JavaScript的使用你知道几种?(上)
  • Java多态
  • Map集合、散列表、红黑树介绍
  • SQLServer之创建数据库快照
  • swift基础之_对象 实例方法 对象方法。
  • ucore操作系统实验笔记 - 重新理解中断
  • vue2.0项目引入element-ui
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 高程读书笔记 第六章 面向对象程序设计
  • 记录一下第一次使用npm
  • 深入浅出Node.js
  • 手机端车牌号码键盘的vue组件
  • 移动端唤起键盘时取消position:fixed定位
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • MyCAT水平分库
  • mysql面试题分组并合并列
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • 如何在招聘中考核.NET架构师
  • ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLTr
  • #APPINVENTOR学习记录
  • #git 撤消对文件的更改
  • (1)STL算法之遍历容器
  • (13):Silverlight 2 数据与通信之WebRequest
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (7) cmake 编译C++程序(二)
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二开)Flink 修改源码拓展 SQL 语法
  • (二十四)Flask之flask-session组件
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • . NET自动找可写目录
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .net core Redis 使用有序集合实现延迟队列
  • .NET Project Open Day(2011.11.13)
  • .net通过类组装数据转换为json并且传递给对方接口