123

uniapp根据获取当前经纬度,再根据经纬度去定位具体省市区

2021-04-23 21:11 稿源:网畅天下  6773次访问

因为uniapp官网文档的定位功能,只能提供经纬度,如果要获取当前具体的位置信息,必须要调取官方的地图方法,然后在地图上选点,这一点违背了,开启定位后可以自动获当前省市区县具体的位置地点,所以如何在拿到经纬度后,去获取当前的具体位置呢,详细代码如下:

第一步: 在腾讯平台申请自己的秘钥(申请地址:https://lbs.qq.com/  )

第二步: 在小程序后台,将apis.map.qq.com配置为合法域名,否则会提示:apis.map.qq.com不在以下 request 合法域名列表中具体操作如图:

QQ截图20210423211621.png

注意配置完后,代码可能不会立即生效,此时请在微信开发者工具的项目配置里面,刷新一下,看添加的是否生效,如图:

QQ截图20210423211719.png

第三步:下载腾讯地图api js文件:

QQ截图20210423212132.png

这里有下载地址和详细说明

第四步:将此文件放在对应的文件夹,如common目录下

第五步:将js文件引入

 import QQMapWX from '../../common/qqmap-wx-jssdk'

复制代码第六步:在onLoad函数里注册

onLoad(option) {

    this.qqmapsdk = new QQMapWX({

        // 在腾讯平台自己申请的秘钥

        key: '秘钥' 

    })

},

复制代码第七步:获取当前经纬度

 getPreciseLocation: function () {

    let vm = this;

    uni.getLocation({

        type: 'wgs84',

success: function (res) {

    var latitude = res.latitude

    var longitude = res.longitude

    vm.getLocal(latitude, longitude)

},

fail: function (res) {

    console.log('fail' + JSON.stringify(res))

}

    })

}

复制代码最后一步,根据经纬度,调用腾讯地图api获取具体省市县

 getLocal: function (latitude, longitude) {

    let vm = this

        vm.qqmapsdk.reverseGeocoder({

    location: {

        latitude: latitude,

longitude: longitude

    },

    success: function (res) {

console.log(res)

    },

        fail: function (res) {

      console.log(res)

},

complete: function (res) {

    // console.log(res)

        }

})

}

注意:如果此时提示请求来源未被授权,是因为 微信小程序使用的时候,WebServiceAPI 域名白名单不能配置,否则会报错,

解决办法将白名单清空,如图:

配置路径:为秘钥的生成地址:lbs.qq.com/console/myk…


QQ截图20210423212404.png

注意:如果后期项目上线,此Ip要加上服务器IP。



再次特感谢网友分享教程  https://juejin.cn/post/6844903708745007117

有好的文章希望朋友们帮助分享推广,猛戳这里河洛伊哥

相关热点

查看更多