uniapp腾讯地图导航

1,188 阅读1分钟

1、打开腾讯地图:map.qq.com/

2、选择地图API

然后获得到一个KEY字符串,查询地址时用到

3、然后获得到一个KEY字符串,查询地址时用到

代码

打开地图选择位置

chooseLocation() {
    // 实例化API核心类 
    var qqmapsdk = new QQMapWX({
        key: this.key // 必填 开发密钥 上面获取到的KEY
    });
     qqmapsdk.reverseGeocoder({
          //位置坐标,默认获取当前位置,非必须参数
          location: '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
          success: (res) => {
                console.log('返回的值', res)
                res = res.result
                uni.chooseLocation({
                   latitude: res.location.lat / 1,
                   longitude: res.location.lng / 1,
                   keyword: res.formatted_addresses.recommend,
                   success: (result) => {
                           if (result.errMsg !== "chooseLocation:ok") 
                                return uni.showToast({
                                    title: '打开地图失败,请重试',
                                    icon:'error'
                                });
                                // 获取到了地图地址
                                console.log('选择地图', result)
                   },
                   fail: (err) => {
                           console.log('错误', err)
                   }
              })
         }
    })

},

查看地址导航

// 获取经纬度
getLocation() {
    // 实例化API核心类 
    var qqmapsdk = new QQMapWX({
        key: this.key // 必填 开发密钥
    });
    qqmapsdk.geocoder({
        address: 地址,
        type: 'gcj02',
        success: res => {
            if (res.message !== 'query ok') {
                return uni.showModal({
                        content: '获取地址信息失败',
                        showCancel: false
                });
            }
            uni.openLocation({
               latitude: res.result.location.lat / 1,
               longitude: res.result.location.lng / 1,
               name: '', // 地址名称
               address: '', // 地址
            })

        },
        fail: (err) => {
            uni.showModal({
                    content: '获取地址信息失败',
                    showCancel: false
            });
        },
        complete: () => {
            uni.hideLoading()
        }
    })
},

小程序调用地理位置api需要在manifest.json里面配置

"permission" : {
    "scope.userLocation" : {
        "desc" : "你的位置信息将用于小程序位置接口的效果展示"
    }
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation", 'openLocation' ],
"lazyCodeLoading" : "requiredComponents",