• uniapp+腾讯地图定位获取位置信息


    第一步,获取并配置腾讯地图key,流程如图所示

    进入开放平台后,先注册登录过后,点击控制台,在应用管理里面创建一个应用

    经过以上步骤就获取了key

    然后就是包的下载

    下载好了过后解压存放到项目根目录下

    做完以上步骤就到配置环节,先配置manifest.json文件

    1. "permission": {
    2. "scope.userLocation": {
    3. "desc": "你的位置信息将用于小程序定位"
    4. }
    5. },
    6. "requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"]

    将以上代码放到这儿

    再配置腾讯地图的key

    修改qqmap-wx-jssdk.js文件

    引入文件

    import QQMapWX from '../../tenxun/qqmap-wx-jssdk.js'

    然后就完成了。就可以开始编写代码了,

    成功了:

    附上以上代码

    1. uni.getSetting({
    2. success(res) {
    3. if (res.authSetting['scope.userLocation']) {
    4. console.log(123);
    5. // 请求用户的权限
    6. uni.authorize({
    7. scope: 'scope.userLocation',
    8. success() {
    9. console.log(456);
    10. // 用户已经同意小程序使用定位功能,后续调用 uni.getLocation接口不会弹窗询问
    11. let location = {
    12. longitude: 0,
    13. latitude: 0,
    14. province: '',
    15. city: '',
    16. area: '',
    17. street: '',
    18. address: '',
    19. }
    20. uni.getLocation({
    21. type: 'gcj02',
    22. success: function(res) {
    23. //保存纬度数据
    24. location.latitude = res.latitude;
    25. //保存经度度数据
    26. location.longitude = res.longitude;
    27. console.log('经度' + location.longitude);
    28. console.log('纬度' + location.latitude);
    29. const map = new QQMapWX({
    30. key: 'SO4BZ-4N4KI-NLIG7-UTKAM-QUZF6-TQBC4',
    31. })
    32. map.reverseGeocoder({
    33. location,
    34. success(res) {
    35. let info = res.result;
    36. console.log('info', info);
    37. location.province = info.address_component.province;
    38. location.city = info.address_component.city
    39. location.area = info.address_component.district
    40. location.street = info.address_component.street
    41. location.address = info.address
    42. console.log(location);
    43. area.value = location
    44. },
    45. fail: function(res) {
    46. console.log(res);
    47. }
    48. });
    49. },
    50. fail: function(res) {
    51. console.log(res);
    52. }
    53. });
    54. },
    55. })
    56. }
    57. }
    58. })

    *注:写完代码后在电脑端的位置有偏差很正常,要运行到真机上,并且关闭wifi,使用流量,就能获得准确的位置

    希望可以帮助大家

  • 相关阅读:
    自媒体账号的权重规则你知道哪些?
    c++ 类中隐藏的六个(c11之后 八个)默认函数
    Django学习
    ArrayList和LinkedList的区别,以及应用场景
    HDLbits: Edgedetect
    Zookeeper
    TypeError: Object of type bool_ is not JSON serializable(PKL转json)
    【reverse】buu-CrackRTF——提取PE中的resource、rtf的固定文件头
    [elasticsearch]使用postman来查询数据
    vue3嵌套路由keep-alive问题
  • 原文地址:https://blog.csdn.net/m0_64931981/article/details/132619923