微信小程序--获取当前位置信息

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Magic_Ninja/article/details/81509545

本博文的例子思路是设置初始城市名为广州市，然后通过点击按钮获取自己城市名。把广州市替换为自己的城市名。

查看官方开发文档

官方文档

wx.getLocation(OBJECT)
获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用

OBJECT参数说明：

参数	类型	必填	说明	最低版本
type	String	否	默认为 wgs84 返回 GPS 坐标；gcj02 返回国测局坐标，可用于wx.openLocation的坐标
altitude	Boolean	否	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	1.6.0
success	Function	是	接口调用成功的回调函数，返回内容详见返回参数说明。
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	说明	最低版本
latitude	纬度，浮点数，范围为-90~90，负数表示南纬
longitude	经度，浮点数，范围为-180~180，负数表示西经
speed	速度，浮点数，单位m/s
accuracy	位置的精确度
altitude	高度，单位 m	1.2.0
verticalAccuracy	垂直精度，单位 m（Android 无法获取，返回 0）	1.2.0
horizontalAccuracy	水平精度，单位 m	1.2.0

示例代码：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

例子开始

点击获取经纬度

构建一个按钮

使用bindtap在.wxml中构建一个按钮

  <view class='location-wrapper' bindtap='onTapLocation'>
    <view class='location'>
      <view class='location-text'>{{city}}</view>
    </view>
    <view class='location-tips'>{{locationTipsText}}</view>
  </view>

定义{{city}}和{{locationTipsText}}两个动态变量
接下来在.js中调用

//Page的data申明该动态变量
data: {
    city: "广州市",
    locationTipsText: "点击获取当前位置"
  },

//Page的onTapLocation()
onTapLocation() {
  wx.getLocation({
    success: rse => {
      console.log(rse.latitude, rse.longitude)
    }
  })
}

wxss自己调一个喜欢的就行
然后编译，点击按钮，Console打印出经纬度出来
有了经纬度就好办了，可以获取最近城市的名称

使用腾讯位置服务获取城市名

获取必要的东西

微信小程序JavaScript SDK
利用腾讯地图SDK，使用逆地址解析，具体请看SDK

1. 申请开发者密钥（key）：申请密钥

2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0

3. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

4. 小程序示例

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({

    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
})

配置SDK

建立/libs/qqmap-wx-jssdk.js文件

申请到密钥和下载了SDK之后

在项目目录建立一个文件夹libs

然后把解压之前下载的SDK里面的qqmap-wx-jssdk.js文件复制进去

在index.js中创建一个常数变量

const QQMapWX = require(
  '../../libs/qqmap-wx-jssdk.js'
  )

在onLoad()中加上一个新的成员函数

this.qqmapsdk = new QQMapWX({
  key: 'IC7BZ-J3SW4-YMDU7-D6LQU-XXXXX-XXXXX'
})

加入自己刚刚申请的key

调用SDK

这是之前点击获取位置的按钮

onTapLocation() {
  wx.getLocation({
    success: rse => {
      console.log(rse.latitude, rse.longitude) // 删了这里加上调用经纬度
    }
  })
}

加入代码后

  onTapLocation() {
    wx.getLocation({
      success: rse => {
        //开始添加代码
        //调用接口
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: rse.latitude,
            longitude: rse.longitude
          },
          success: res => {
            let city = res.result.address_component.city
            console.log(city) //打印城市名称
          }
        })
      }
    })
  }

点击按钮就可以看到console打印出城市名，如果没出现就进入这个网址http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=
等于后面加上自己的key看看能不能返回数据。
其实做到这步就已经成功了，只不过这篇博文是我自己的小例子写的，所以还没写完。

显示自己的城市名

这样就完成了

  onTapLocation() {
    wx.getLocation({
      success: res => {
        //调用接口 
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: res => {
            let city = res.result.address_component.city
            //调用网络数据
            this.setData({
              city: city, //城市为获取的城市
              locationTipsText: "" //"点击获取当前位置"这句话就不显示了
            })
          }
        })
      }
    })
  }

这样点击按钮就会吧广州市替换为自己所在的城市，”点击获取当前位置”这一行字也消失了。

嗯嗯，好吧，我写得有点乱了。但是还是好理解的。