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

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

查看官方开发文档

官方文档

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

OBJECT参数说明:

参数类型必填说明最低版本
typeString默认为 wgs84 返回 GPS 坐标;gcj02 返回国测局坐标,可用于wx.openLocation的坐标
altitudeBoolean传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度1.6.0
successFunction接口调用成功的回调函数,返回内容详见返回参数说明。
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
success返回参数说明:
参数说明最低版本
latitude纬度,浮点数,范围为-90~90,负数表示南纬
longitude经度,浮点数,范围为-180~180,负数表示西经
speed速度,浮点数,单位m/s
accuracy位置的精确度
altitude高度,单位 m1.2.0
verticalAccuracy垂直精度,单位 m(Android 无法获取,返回 0)1.2.0
horizontalAccuracy水平精度,单位 m1.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: "" //"点击获取当前位置"这句话就不显示了
            })
          }
        })
      }
    })
  }

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

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

相关文章

发表评论

您的电子邮箱地址不会被公开。