草庐IT

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

林恒 2023-03-28 原文

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

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 微信对接地图的三种操作的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作? - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类,然后对于那个类对应的每个div,我想根据div的内容执行一个Action。例如,我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面,我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div,对于每个检查它的.descriptiondiv是否包含单词“adoption

  5. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前? - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证,而另一些则不需要身份验证。例如,我有users端点,看起来像这样:moduleBackendmoduleV1classUsers现在如您所见,除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义,比如passwords并且只是删除password/forget从逻辑上讲,这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项,我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况?

  6. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  7. ruby - 在 Ruby 中是否有一种惯用的方法来操作 2 个数组? - 2

    a=[3,4,7,8,3]b=[5,3,6,8,3]假设数组长度相同,是否有办法使用each或其他一些惯用方法从两个数组的每个元素中获取结果?不使用计数器?例如获取每个元素的乘积:[15,12,42,64,9](0..a.count-1).eachdo|i|太丑了...ruby1.9.3 最佳答案 使用Array.zip怎么样?:>>a=[3,4,7,8,3]=>[3,4,7,8,3]>>b=[5,3,6,8,3]=>[5,3,6,8,3]>>c=[]=>[]>>a.zip(b)do|i,j|c[[3,5],[4,3],[7,6],

  8. ruby - 如何更优雅地记下这三种情况? - 2

    是否可以让这段代码更紧凑?我在这里错过了什么吗?ifvaluemax_ratemax_rateelsevalueend 最佳答案 这里有一些完全不同的东西:[min_rate,value,max_rate].sort[1] 关于ruby-如何更优雅地记下这三种情况?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/13309740/

  9. ruby-on-rails - 如何让 Rails View 返回其关联的操作名称? - 2

    我有一个非常简单的Controller来管理我的Rails应用程序中的静态页面:classPagesController我怎样才能让View模板返回它自己的名字,这样我就可以做这样的事情:#pricing.html.erb#-->"Pricing"感谢您的帮助。 最佳答案 4.3RoutingParametersTheparamshashwillalwayscontainthe:controllerand:actionkeys,butyoushouldusethemethodscontroller_nameandaction_nam

  10. ruby - Ruby 和 Ruby on Rails 中的三层架构 - 2

    我是一名决定学习Ruby和RubyonRails的ASP.NETMVC开发人员。我已经有所了解并在RoR上创建了一个网站。在ASP.NETMVC上开发,我一直使用三层架构:数据层、业务层和UI(或表示)层。尝试在RubyonRails应用程序中使用这种方法,我发现没有关于它的信息(或者也许我只是找不到它?)。也许有人可以建议我如何在RubyonRails上创建或使用三层架构?附言我使用ruby​​1.9.3和RubyonRails3.2.3。 最佳答案 我建议在制作RoR应用程序时遵循RubyonRails(RoR)风格。Rails

随机推荐