首页 > 其他分享 >uniapp 微信对接地图的三种操作

uniapp 微信对接地图的三种操作

时间:2022-11-09 19:00:00浏览次数:41  
标签:uniapp console log success res 对接 uni 授权 微信

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

1.uni.getLocation 获取当前经维度

 先上代码

  let that = this
                // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
                uni.getSetting({
                    success (res) {
                        console.log(res)
                        // 如果没有授权
                        if (!res.authSetting['scope.userLocation']) {
                            // 则拉起授权窗口
                            uni.authorize({
                                scope: 'scope.userLocation',
                                success () {
                                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                                    uni.getLocation({
                                        type: 'wgs84',
                                        success: function (res) {
                                            that.longitude = res.longitude
                                            that.latitude = res.latitude
                                            let jinweidu = {
                                                longitude: res.longitude,
                                                latitude: res.latitude,
                                            }
                                            uni.setStorageSync('jinweidu', jinweidu);
                                            console.log(res)
                                            console.log('当前位置的经度:' + res.longitude)
                                            console.log('当前位置的纬度:' + res.latitude)
                                            that.getlist()
                                        }, fail (error) {
                                            uni.showToast({
                                                title: '获取地址失败,请检查手机是否打开定位功能,未打开将导致部分功能不可用',
                                                icon:'none'
                                            });
                                        }
                                    })
                                },
                                fail (error) {
                                    //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                                    console.log('拒绝授权', error)
                                    uni.showModal({
                                        title: '提示',
                                        content: '若点击不授权,将无法使用位置功能',
                                        showCancel: false,
                                        // cancelText: '不授权',
                                        // cancelColor: '#999',
                                        confirmText: '授权',
                                        confirmColor: '#f94218',
                                        success (res) {
                                            console.log(res)
                                            if (res.confirm) {
                                                // 选择弹框内授权
                                                uni.openSetting({
                                                    success (res) {
                                                        console.log(res.authSetting)
                                                    }
                                                })
                                            } else if (res.cancel) {
                                                // 选择弹框内 不授权
                                                console.log('用户点击不授权')
                                            }
                                        }
                                    })
                                }
                            })
                        } else {
                            // 有权限则直接获取
                            uni.getLocation({
                                type: 'wgs84',
                                success: function (res) {
                                    that.longitude = res.longitude
                                    that.latitude = res.latitude
                                    let jinweidu = {
                                        longitude: res.longitude,
                                        latitude: res.latitude,
                                    }
                                    uni.setStorageSync('jinweidu', jinweidu);
                                    console.log(res)
                                    console.log('当前位置的经度1:' + res.longitude)
                                    console.log('当前位置的纬度1:' + res.latitude)
                                    that.getlist()
                                }, fail (error) {
                                    uni.showToast({
                                        title: '获取地址失败,请检查手机是否打开定位功能,未打开将导致部分功能不可用',
                                        icon:'none'
                                    });
                                    console.log('失败', error)
                                }
                            })
                        }
                    }
                })
            
            }

将此方法放到onLoad生命周期内,第一次进入页面会出现授权弹窗(如下图)

  点击允许就可以获取到经纬度了

 如果拒绝授权位置信息的话就会出现弹窗进行提醒,提醒内容可以自己更改。

 这个时候点击弹窗的授权会进入设置页面,允许位置信息再返回就可以获取到经纬度了

特别注意:

uni.openSetting调起客户端小程序设置界面,返回用户设置的操作结果,此api只能在小程序中使用

uni.authorize查看是否已授权api只能在微信、百度、字节、飞书、快手、QQ小程序中使用。

且需要在微信平台开通,并在配置文件里设置

		"usingComponents": true,
		"permission": {
			"scope.userLocation": {
				"desc": "你的位置信息将用于和门店的距离长度"
			}
		},
		"requiredPrivateInfos": [
			"getLocation",
			"chooseLocation"
		]

2.uni.chooseLocation 调起微信小程序 获取详细地址

先看代码

getMapLocation(){
	uni.chooseLocation({
		success:(res)=> {
			console.log(res);
			// this.getRegionFn(res);
		},
		fail:()=>{
			// 如果用uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息
			uni.getSetting({
				success: (res) => {
					console.log(res);
					var status = res.authSetting;
					if(!status['scope.userLocation']){
					// 如果授权信息中没有地理位置的授权,则需要弹窗提示用户需要授权地理信息
						uni.showModal({
							title:"是否授权当前位置",
							content:"需要获取您的地理位置,请确认授权,否则地图功能将无法使用",
							success:(tip)=>{
								if(tip.confirm){
								// 如果用户同意授权地理信息,则打开授权设置页面,判断用户的操作
									uni.openSetting({
										success:(data)=>{
										// 如果用户授权了地理信息在,则提示授权成功
											if(data.authSetting['scope.userLocation']===true){
												uni.showToast({
													title:"授权成功",
													icon:"success",
													duration:1000
												})
												// 授权成功后,然后再次chooseLocation获取信息
												uni.chooseLocation({
													success: (res) => {
														console.log("详细地址",res);
														// this.getRegionFn(res);
													}
												})
											}else{
												uni.showToast({
													title:"授权失败",
													icon:"none",
													duration:1000
												})
											}
										}
									})
								}
							}
						})
					}
				},
				fail: (res) => {
					uni.showToast({
						title:"调用授权窗口失败",
						icon:"none",
						duration:1000
					})
				}
			})
		}
	});
},

授权成功后,就可以进入到uniapp自带的选择地点的页面了,可以直接选取/拖动地图选取/搜索地点选取等多种方式实现地点的选择,页面真的是很好看啊。完全长在了我的审美点上。哈哈。

唯一的缺点就是,这个默认使用的腾讯地图,但是腾讯地图检索不是很精确,不如高德。

注意:使用uni.chooseLocation时,地图加载但附近地址列表不加载问题

 

 与应用的sha1一致

3.uni.openLocation 调起微信小程序 打开详细地址

先上代码

//查看内置地图 (导航)  注意:经纬度必须转换为number类型,不然就...哈哈哈
goMap(item){
  // console.log(item) 
   uni.openLocation({
     latitude: Number(item.take.mer_take_location[0]), 
     longitude: Number(item.take.mer_take_location[1]),
     name: item.take.mer_take_address,
     success() {
         console.log('success');
     }
   });
 }

使用后效果如下

本文部分转载于:

https://blog.csdn.net/lovewangyage/article/details/127660148

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:uniapp,console,log,success,res,对接,uni,授权,微信
From: https://www.cnblogs.com/smileZAZ/p/16874795.html

相关文章

  • GO语言实战-小程序或公众号接口gin框架验证微信服务器消息签名
    在开发GO小程序或者公众号接口的时候,需要对接微信消息的token签名验证,这时候需要开发者验证来自微信,并返回指定的字符串微信文档里给的是PHP版本的代码,下面这个......
  • uniapp上架ios流程
    上架基本需求资料 1、苹果开发者账号2、开发好的APP 上架AppStore审核分7步进行。 1、安装iOS上架辅助软件Appuploader2、申请iOS发布证书(p12)window操作教程3、......
  • 微信小程序使用新版Canvas画布实现电子签名
    <viewclass="containercolumn-me"><viewclass="tips">请绘制清晰可见的签名并保存</view><canvasclass="canvas"id="canvas"type="2d"disable-scrol......
  • 微信禁止分享功能
    <scripttype='text/javascript'src='jweixin.-1.0.0.js'></script><scripttype='text/javascript'src=weixinhide.js'></script><scripttype='text/javascript'>varfT......
  • 基于云开发的微信答题活动小程序v1.0搭建部署帮助文档
    11月是全国“119”消防宣传月,不少企事业单位都会举办消防安全知识竞答活动,因此我基于云开发搭建了消防安全知识答题活动小程序。接着,还写完了初阶的手把手教你搭建答题活......
  • vs code+uniapp+vue3+vite+typescript+pinia开发
    //–save-dev会把eslint安装到package.json文件中的devDependencies属性中,仅开发时用到,生产不需要npminstalleslint--save-dev//https://eslint.bootcss.co......
  • uniapp+pixijs写的一个转盘
    1,turntable.vue文件,这个里面显示菜单的时候,上一行文字还不能消除,我已经在研究了,等我搞好了我会更新这里的。后期等我多研究研究pixijs,我会出一些pixijs的文章。<template......
  • 05 uniapp/微信小程序 项目day05
    ​一.登录与支付1.1登录1.1.1条件判断当我们点击结算应当进行条件判断第一个如果没有勾选商品第二个是没选择地址第三个是未登录1.1.2页面布局应该有两个页......
  • uniapp-uview 微信小程序form中自定义校验规则失效问题。
    uniapp-uview微信小程序form中自定义校验规则失效问题。仔细阅读官方文档,发现有提示。需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。如......
  • 微信共享停车场小程序开发设计方案
    随着城市的发展,人们的生活水平提高,车辆的增多,在有限的城市空间中,停车难成为了人们经常遇到的问题,附近找不到停车位置的情况时有发生,为了更好的解决这一问题,可以通过共享停车......