uni-app微信小程序实现地图功能

393 阅读1分钟

1、在manifest.jsonz中进行配置

记得要配置上需要使用到的api哦,要不然会出现问题 b9902c0161653bf09fc84dd3cf278de.jpg

image.png

2、以uni.chooseLocation这个api为例子,使用地图

下面说明一下,我们需要使用uni.getSetting这个api获取用户的当前设置判断用户是否已经授权,如果已经授权,那么我们直接调用uni.chooseLocation使用地图,若用户的地理授权处于关闭状态,则我们需要使用uni.authorize弹窗询问用户是否同意授权小程序使用定位功能,若同意再调用uni.chooseLocation

// 腾讯地图定位功能
      getMapLocation() {
        uni.getSetting({
          success: (res) => {
            // 用户已授权地理位置
            if (res.authSetting['scope.userLocation']) {
              uni.chooseLocation({
                success: (res) => {
                  console.log(res)
                },
                fail: () => {
                  console.log("获取定位失败或用户取消")
                }
              })
            }
            // 用户地理位置处于关闭状态
            else if (res.authSetting['scope.userLocation'] === undefined) {
              uni.authorize({
                scope: 'scope.userLocation',
                success: (res) => {
                  // 用户同意授权
                  uni.chooseLocation({
                    success: (res) => {
                      console.log(res)
                    },
                    fail: () => {
                      console.log("获取定位失败或用户取消")
                    }
                  })
                }
              })
            }
          },
          fail: () => {
            uni.$showMsg('获取授权信息失败', 'none')
          }
        })
      }

3、显示地图

下面的地图界面是在开发者工具中显示的,由于基础库版本不一样,在真机上界面还是有点区别的,更好看了嘿嘿嘿

image.png