uniapp打开地图直接获取位置

news2024/9/24 17:19:45

在这里插入图片描述
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 = 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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1971511.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

业务逻辑支付漏洞靶场复现(dami,niushop,cmseasy)

目录 dami_5.4 第一种&#xff1a;直接修改页面数量 第二种&#xff1a;利用抓包修改购买数量和金额 Niushop Cmseasy 第一种&#xff1a;改变购买数量 第二种&#xff1a;利用抓包修改数量 dami_5.4 首先通过注册页面注册账户&#xff0c;并登录。 第一种&#xff1a;直…

鉴源实验室·HTTP协议网络安全攻击

作者 | 李芷若 上海控安可信软件创新研究院工控网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 01 背 景 随着互联网的迅猛发展&#xff0c;HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&…

萝卜快跑引领换电革命,储能蓝海爆发千亿商机,你抓住了吗?

近日&#xff0c;百度旗下的无人驾驶出行服务平台“萝卜快跑”火爆出圈&#xff0c;7月10日凭借优秀的订单量表现成功助推百度股价上涨超10%&#xff0c;其六公里4元的超高性价比广受好评。多个网络平台的自媒体博主们也抓准时机开始各类测评体验。 百度“萝卜快跑”无人驾驶项…

QT安装 error: [QNetworkReply::NetworkError(

QT安装遇到问题&#xff1a; [29040] Warning: No QtAccount credentials found. Please login via the maintenance tool of the SDK. [29040] Warning: No QtAccount credentials found. Please login via the maintenance tool of the SDK. [31404] Warning: Network error…

linux用户组练习

准备工作 [rootlocalhost ~]# watch -n 1 tail -n 5 /etc/group使用watch 动态监控 1.建立用户组 shengcan&#xff0c;其id 为2000 2.建立用户组 caiwu&#xff0c;其id 为 2001 3.足建立用户组 jishu&#xff0c;其id 为 2002 4.建立用户lee&#xff0c;指定其主组id为sh…

QT多媒体编程(二)——视频编程知识详解及mp4视频播放器Demo

目录 引言 1. QMediaPlayer 类详解 1.1 基本用法 示例代码&#xff1a; 1.2 常用函数 2. QVideoWidget 类详解 2.1 基本用法 示例代码&#xff1a; 2.2 常用函数 3. 实际案例&#xff1a;视频播放器 UI界面 核心代码&#xff1a; 运行结果&#xff1a; 4. 总结 引…

NodeJS凉山地区特色农产品团购平台-计算机毕业设计源码72936

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 用户登录流程 2.2.2 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4用例分析 2.5本章小结 3 系统总体设计 3…

【LeetCode每日一题】2024年8月第一周(上)

2024.7.30 中等 链接&#xff1a;2961. 双模幂运算 &#xff08;1&#xff09;题目描述&#xff1a; &#xff08;2&#xff09;示例&#xff1a; &#xff08;3&#xff09;分析&#xff1a; ① 在计算中&#xff0c;反复用到了%10&#xff0c;说明返回的只要取个位即可&…

SEO之网站结构优化(八)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、新手上云 8、URL静态化 URL静态化一直以来都是最基本的SEO要求之一&#xff0c;但近一两年 SEO 行业对是否一定要做静…

科普文:万字细说微服务及其框架Netflix,Spring Cloud,Spring Cloud Alibaba梳理

概叙 微服务&#xff08;Microservices&#xff09;是一种软件架构风格&#xff0c;它将单一的应用程序拆分为多个小的服务&#xff0c;每个服务都是独立运行和部署的。每个微服务通常只专注于一个业务功能&#xff0c;具有自己的数据存储&#xff0c;并且通过轻量级的通信机制…

多无人机协同机间通信技术详解

随着无人机技术的飞速发展&#xff0c;多无人机系统&#xff08;Multi-Unmanned Aerial Vehicle, Multi-UAV&#xff09;在军事侦察、环境监测、目标跟踪、物流配送等多个领域展现出巨大潜力。多无人机协同作业的核心在于高效的机间通信技术&#xff0c;它能够实现无人机之间的…

npm install 巨慢,导致Jenkins编译报错问题解决——基础积累

今天在弄后台系统的服务器编译时&#xff0c;一直报错。报错信息为&#xff1a;系统找不到指定的路径。 最后进入到服务器中&#xff0c;找到E:/Jenkins/WorkSpace/JiePeiAiMomsAdmin_FenZhi这个路径&#xff0c;然后通过cmd进入到命令提示符中。 然后通过npm i进行安装&#…

简单的docker学习 第4章docker容器

第4章 Docker容器 4.1 容器基础 4.1.1 容器启动流程 通过 docker run 命令可以启动运行一个容器。该命令在执行时首先会在本地查找指定的镜像&#xff0c;如果找到了&#xff0c;则直接启动&#xff0c;否则会到镜像中心查找。如果镜像中心存在该镜像&#xff0c;则会下载到…

外贸建站:WordPress搭建外贸独立站零基础小白保姆级教程

凡做外贸的&#xff0c;我相信在过去几年中通过亚马逊、速卖通等电商平台上都取得了一定的成功。然而&#xff0c;近年来电商平台上的竞争激烈&#xff0c;利润空间有限&#xff0c;流量获取困难和昂贵&#xff0c;这对许多外贸从业者造成了困扰。因此&#xff0c;为了减少对平…

易境通散货集拼系统是如何让散拼效率提高80%的?

散货集拼为什么必须要有靠谱的系统才行&#xff1f;因为散拼很容易出现各种问题&#xff0c;而且会连带着影响不同的环节。货物整箱利用空间不充足&#xff0c;会导致集装箱数量增加&#xff0c;运费成本激增&#xff0c;返工整理会耽误发货&#xff0c;延长送货时间&#xff0…

【JavaEE】线程状态

目录 前言 一.线程状态图 二.线程状态 1.初始状态(NEW) 2.运行状态(RUNNING) 3.等待状态&#xff08;WAITING) 4.超时等待&#xff08;TIMED_WAITING) 5.阻塞状态&#xff08;BLOCKED) 6.终止状态(TERMINATED) 三.线程状态间的转换 四.总结 前言 线程状态及其状态转换…

mindspore框架下Pix2Pix模型实现真实图到线稿图的转换|(三)Pix2Pix模型训练与模型推理

mindspore框架下Pix2Pix模型实现真实图到线稿图的转换 mindspore框架下Pix2Pix模型实现真实图到线稿图的转换|&#xff08;一&#xff09;dataset_pix2pix数据集准备mindspore框架下Pix2Pix模型实现真实图到线稿图的转换|&#xff08;二&#xff09;Pix2Pix模型构建mindspore框…

Google Gemma2 2B:语言模型的“小时代”到来?

北京时间8月1日凌晨&#xff08;当地时间7月31日下午&#xff09;&#xff0c;Google发布了其Gemma系列开源语言模型的更新&#xff0c;在AI领域引发了巨大的震动。Google Developer的官方博客宣布&#xff0c;与6月发布的27B和9B参数版本相比&#xff0c;新的2B参数模型在保持…

python实现consul的服务注册与注销

我在使用consul的时候主要用于prometheus的consul服务发现&#xff0c;把数据库、虚拟机信息发布到consul&#xff0c;prometheus通过consul拿到数据库、虚拟机信息去采集指标信息。 此篇文章前提是已经安装好consul服务以后&#xff0c;安装consul请参考二进制方式部署consul…

Nat网络地址转换实验

一、实验拓扑 二、实验要求 三、实验思路 四、实验展示 1.接口IP配置 telnet路由器 r1 r2 r3 pc2 2.全网可达&#xff08;给边界路由器&#xff0c;私家路由器写上缺省 &#xff0c;还要用到nat地址转换&#xff0c;多对多一对多&#xff0c;端口映射&#xff09;因为左右…