微信小程序 - 获取用户当前位置信息（用于定位地址及获取地址等需求）

左手的ㄟ右手 2022-12-13 01:48 838阅读 0赞

## 前言 ##

> 有两种获取位置的方式，一种是 `直接返回经纬度等信息（必须代码处理后才能显示到界面上）`，另一种是 `"界面选择式" 由用户打开地图选择位置`。

最近有添加用户收货地址需求（外卖项目），需要获取用户当前位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cente]

## 第一步 ##

> 说白了，就是微信需要让用户确定是否允许你获取它的位置，如果你不授权，将弹框提示。

首先，你必须进行 **授权** ，无论是哪种获取用户地址的方式。

--------------------

一、配置 `app.json` 文件，加入以下代码：

"permission": { 
      "scope.userLocation": { 
        "desc": "这里填写描述信息(如：美团请求获取您的位置信息)"
      }
    }

不知道加在哪里的话，请看如下配置示例：

{ 
      "pages": [
        "pages/index/homePage/homePage",
        "pages/menu/homePage/homePage",
      ],
      
      "permission": { 
        "scope.userLocation": { 
          "desc": "请求获取您的位置信息"
        }
      },
      
      "window": { 
        "navigationBarBackgroundColor": "#ffffff",
      },
      
      "sitemapLocation": "sitemap.json"
    }

这样，就完成了授权配置工作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cntr]

## 第二步 ##

> 首先你要确保你已经做了授权配置（第一步），否则会出现未授权弹框提示。

先来看一下 `API` ，后面我们代码来实现。

1.  `wx.getLocation`：获取当前的地理位置、速度。[官方文档介绍][Link 1]![在这里插入图片描述][20201009160936872.png_pic_ceter]
2.  `wx.chooseLocation`：打开地图选择位置。[官方文档介绍][Link 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cetr]

## 代码实现：打开地图选择位置 ##

> 推荐这种方式，由用户选择并确定，开发者也容易获取到当前位置信息。

我们来实现一下 `wx.chooseLocation` 由用户选择或搜索地址。

/* * 很简单，直接在按钮中触发函数调用api即可 * 返回的res就包含了用户所选择的当前位置信息 * [api其他配置项请参照文档根据自身需求配置] */
    wx.chooseLocation({ 
     success:function(res)
     { 
        console.log(res)//包含所有当前位置信息
     }
    })

打印结果：  
![在这里插入图片描述][2020100916072199.png_pic_ceter]

## 实现：返回位置经纬度 ##

> 这种方式更适合与 map 地图组件配合，用于动态刷新地图位置，但不适合获取当前位置信息。

我们来实现一下 `wx.getLocation` 方式获取经纬度等信息，但你需要将经纬度转为真实地址才能获取使用（如果你是与 map 地图组件配合那么不需要转换）。

wx.getLocation({ 
      type: 'wgs84',
      success (res) { 
        // 返回数据
        console.log(res)
      }
    })

打印结果（可以看到已经返回了经纬度，就证明已经定位到当前位置了）：  
![在这里插入图片描述][20201009155723212.png_pic_cnter]  
经纬度转真实地址比较繁琐，具体请参照：[这篇文章][Link 3]，或参照相关资料。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cente]: /images/20221123/a4fe0693aaee4915b82167c520ed771d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cntr]: /images/20221123/675c6c530b66408e9674094533db4a7c.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
[20201009160936872.png_pic_ceter]: /images/20221123/cb414092d52b401d8604935a35a1328c.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_cetr]: /images/20221123/b1c563d083f44da5a233354bf5dc838a.png
[2020100916072199.png_pic_ceter]: /images/20221123/a0c683fa5e0f4132aaa29deb4f23979e.png
[20201009155723212.png_pic_cnter]: /images/20221123/3137509e912140e7a85f18b01f85a77a.png
[Link 3]: https://blog.csdn.net/ITzhongzi/article/details/106665845?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param