微信小程序之地图使用（二获取当前位置定位）

港控/mmm° 2022-04-23 02:26 543阅读 0赞

获取当前位置定位是直接使用微信小程序自带的API(指路[https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.getLocation.html])

样例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70][]

思路：先获取当前位置的经纬度，再通过经纬度选择城市位置，在此需要使用第三方地图的API（我使用的是腾讯地图API）。

\----------------------------------------------------------------------------------------------------------------------------------------------------------------

代码：

wxml页面就是把获取到的地址，渲染到页面就可以了。

重点是js文件

在配置getLocal方法之前需要配置腾讯地图的SDK。腾讯地图API微信小程序文档（指路[https://lbs.qq.com/qqmap\_wx\_jssdk/index.html][https_lbs.qq.com_qqmap_wx_jssdk_index.html]）这里都有具体的操作步骤。

//引入SDK核心类
    var QQMapWX = require('../../utils/qqmap-wx-jssdk1.0/qqmap-wx-jssdk.min.js');
    var qqmapsdk;
    
    onLoad: function () {
        //获取当前位置的经纬度
        wx.getLocation({
          type: 'wgs84',
          success: function(res) {
            console.log("经纬度:",res)
            var latitude = res.latitude
            var longitude = res.longitude
            that.getLocal(latitude, longitude)//在这里调用getLocal方法把经纬度传入来获取城市位置
          }
        })
    
       qqmapsdk = new QQMapWX({
          key: 'xxxxxxxxxxxxxxxxx' //这里自己的key秘钥进行填充
        });
        
      },
    // 获取当前地理位置
      getLocal: function (latitude, longitude) {
        let that = this;
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //这里的res参数里有具体的城市数据
            that.setData({
              address: res.result.address_component.city 
            })
    
          },
          fail: function (res) {
            that.setData({
              address: '定位失败'
            })
          },
          complete: function (res) {
          }
        });
      }

[https_developers.weixin.qq.com_miniprogram_dev_api_wx.getLocation.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20220323/0376cc60aac4411196d79c9c30000dec.png
[https_lbs.qq.com_qqmap_wx_jssdk_index.html]: https://lbs.qq.com/qqmap_wx_jssdk/index.html