记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法

标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来

uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不能获得当前的地址信息(地址信息只支持app获取), 而 uni.chooseLocation是可以获取到用户的信息与经纬度,但是这个api是有一些bug (搜索外省的搜不到,必须点击右上角完成,才能获取地址) 简单的功能还可以使用

下面是实现思路

自己写一个地图组件,顺带美观一下
1.获取用户授权地址信息,如果授权则uni.getLocation获取用户的经纬度,且在地图中放置当前位置的标点
2.如果没有授权则需要引导用户打开授权功能因为用户拒绝之后必须用组件的方式才能重新获取授权(小程序就是这么规定的)
3.获取经纬度之后 markers可以显示地图中当前位置的标注当用户打开地图组件之后就会显示当前的位置
4.当用户点击地图时切换标注位置获取用户想要的位置信息,获取到用户信息暂时在页面当用户点击确定传给后台完成

<map v-if="mapShow" id='map' ref='map' style="position: fixed;top:0;left:0 ;width: 100%; height:100vh;z-index: 9;":latitude="latitude" :longitude="longitude" :markers="covers" @tap="taps"></map>

//引导用户授权的组件
<view  v-if="showModal"><view class="content"><view class='tes'><view>获取地址失败,请开启定位权限，否则地图功能将无法使用</view></view><button class='bottom' open-type="openSetting" @tap="openSetting">定位授权</button></view></view>

第一部分代码

init(){let this_= thisuni.authorize({//获取授权scope: 'scope.userLocation',//地址success(res) {uni.getLocation({type: 'gcj02', // 返回国测局坐标geocode: true,success: function(res) {console.log(res)this_.longitude = res.longitudethis_.latitude = res.latitude //已经获取到了经纬度var arr = {width: '60rpx',height: '60rpx',latitude: res.latitude,longitude: res.longitude,iconPath: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png',}this_.covers.push(arr) //*在地图中展示位置标注*},})},fail(res) { //授权失败  这里写的是让授权的组件显示 ,并引导用户点击this_.showModal = true }})
}

这里是授权失败重新获取用户授权

openSetting() {uni.openSetting({//这里会打开用户授权设置success(rs) {console.log(rs.authSetting) if(res.authSetting){ //授权成功this.showModal = false  //关闭弹窗 并且执行第一步的操作.this.init()}}})},

第二部分

小程序地图官方实例,点击我

在scrpit中引入  小程序地图的webserviceAPI
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js';const qqmapsdk = new QQMapWX({key: 'key'})taps(e) { //点击地图console.log(e.detail)this.getAddressName(e.detail).then((objs) => {this.addressObj = { //这里拿到地址详细信息      //在地图页面显示当前的详细地址,后面传给后台//在地图中定位一个确定按钮  我这里就不写了longitude: e.detail.longitude,latitude: e.detail.latitude,address: objs.address,//地址}console.log(this.addressObj)var arr = {width: '60rpx',height: '60rpx',latitude: e.detail.latitude,longitude: e.detail.longitude,iconPath: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png',}this.covers = []  this.covers.push(arr) // 重新展示地图的信息});},//获取经纬度的信息getAddressName(addressObj) {return new Promise((res) => {qqmapsdk.reverseGeocoder({location: {latitude: addressObj.latitude,longitude: addressObj.longitude},get_poi: 1,poi_options: "page_size=1;page_index=1",output: 'jsonp',success: (e) => {console.log(e)res(e.result);},fail: err => {res(err);}})})},

记得在uniapp配置中写入下图api,否则页面会有问题

记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
导入微信小程序显示未选择环境或未指定环境，解决办法
导入微信小程序显示未选择环境或未指定环境如下图所示: 解决办法:重新导入,选择云开发(需删掉以前的导入记录) 1.点击云开发申请通过 2.右键cloudfuncrions, 3.点击同步云函数列表 ...
uni.app开发物联网小程序
1.当切换页面的时候,容易与mqtt服务器断开连接,并报错原因:在onLoad事件中,获取参数的时候使用异步获取,但是在事件里面还使用了这个参数,导致mqtt发布的时候,发了一个空主题,导致连接被断 ...
php获取微信图片访问权限,微信小程序访问图片出现403，图片防盗链的解决办法...
在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误. 总结了一下,有两种方法是可以解决这个问题的:使用images.weserv.nl方案使用no-referrer方案 ...
微信小程序需要测试帐号审核不通过的解决办法
问题: 1:小程序可用性和完整性不符合规则: (1):(1)需要测试帐号请将测试帐号发送至邮箱 AppTestAcc@tencent.com.邮件请以[测试帐号]XXX小程序"为主题,并在 ...
微信小程序不能直接加载本地静态图像作为背景的解决办法
1.背景图片设置可以用服务器上的图片. 2.将本地图片转成base64的. wxml: <view class="title-top flex-row"><vie ...
微信小程序rich-text图片不显示及图片过大问题解决办法
js部分代码: that.setData({// 文章内容图片不渲染因为图片是本地的,所以找不到content: res.data.content.replace('/public', 'https: ...
python人脸检测与微信小程序_python+requests对app和微信小程序进行接口测试
对于web端和app端的接口测试来说,他们都是通过请求方法,url和传递的body参数进行接口请求,区别web和app的区别就是header请求的不同.不同的地方在于header中的User-Agen ...
python+requests对app和微信小程序进行接口测试
对于web端和app端的接口测试来说,他们都是通过请求方法,url和传递的body参数进行接口请求,区别web和app的区别就是header请求的不同.不同的地方在于header中的User-Agen ...