小程序位置接口功能


阅读数: 次   

文章导航

引言

在微信小程序的开发过程中，位置信息是一个常用的功能模块。它允许用户与现实世界的地理位置进行交互，无论是展示地图、查找周边服务还是实现定位功能，位置接口都扮演着至关重要的角色。本文将详细介绍如何在微信小程序中使用位置相关接口。

一、官方文档

[微信小程序位置接口]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getFuzzyLocation.html

二、接口调用

  1. 接口调用之前需要在公众平台提交申请，申请的接口审核通过后，才可以使用。

image-20240216105746576

1. 获取位置信息

微信提供了丰富的 API 来获取用户的位置信息，最常用的是 wx.getLocation 方法和wx.getFuzzyLocation方法。

wx.getLocation

使用 wx.getLocation 可以获取用户的当前地理位置信息。该方法返回一个包含经度、纬度等详细信息的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.getLocation({
  type: 'gcj02', // 坐标类型，默认为 wgs84
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
    // 处理位置信息
  },
  fail: function() {
    // 处理错误情况
  }
})

注意事项

  • 确保用户已授权小程序获取位置信息。
  • wx.getLocation 需要在页面加载时调用，且不能在后台调用。
  • 参数 type 可指定返回的坐标类型，’gcj02’ 为可以用于wx.openLocation使用的坐标类型。

2. 展示地图

要展示地图，你可以使用微信小程序提供的地图组件 <map>。

使用<map>组件

1
<map longitude="113.264700" latitude="23.099900" scale="14"></map>

属性说明

  • longitude：中心点的经度。
  • latitude：中心点的纬度。
  • scale：缩放级别，数值为5～18。
  • 其他属性还包括 markers（标记点）、style（样式）等。

示例代码

在页面 WXML 文件中加入 <map> 组件，并绑定事件和设置属性。

1
<map id="myMap" longitude="113.264700" latitude="23.099900" scale="14" bindmarkertap="markerTap"></map>

对应的 JavaScript 文件：

1
2
3
4
5
6
7
Page({
  markerTap: function(e) {
    console.log(e.markerId)
    console.log(e.latLng)
    // 处理点击事件
  }
})

3. 地理编码与反地理编码

有时我们可能需要将经纬度与具体的地址信息相互转换，这时就需要用到地理编码和反地理编码接口。

wx.chooseLocation

用于让用户选择地点，返回具体地址信息。

1
2
3
4
5
6
7
8
9
10
11
wx.chooseLocation({
  success: function(res) {
    var address = res.name // 街道名字
    var latitude = res.latitude
    var longitude = res.longitude
    // 处理选择的位置信息
  },
  fail: function() {
    // 处理错误情况
  }
})

wx.geocoder

用于将经纬度转换为地址描述。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
wx.geocoder({
  type: 'wgs84',
  location: {
    latitude: 23.099900,
    longitude: 113.264700
  },
  success: function(res) {
    var country = res.country
    var province = res.provinceName
    var city = res.cityName
    var district = res.districtName
    var street = res.streetName
    var building = res.buildingName
    // 处理地址信息
  },
  fail: function() {
    // 处理错误情况
  }
})

wx.geocoder.translate

用于将地址描述转换为经纬度。

1
2
3
4
5
6
7
8
9
10
11
12
wx.geocoder.translate({
  type: 'wgs84',
  location: '广东省深圳市南山区科技园南区高新南一道1000号',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    // 处理经纬度信息
  },
  fail: function() {
    // 处理错误情况
  }
})

4. 用户签到，判断当前位置距离活动地点距离

使用getLocation接口获取用户当前位置

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.getLocation({
  type: 'gcj02', // 坐标类型，默认为 wgs84
  success: function(res) {
    var userLatitude = res.latitude
    var userLongitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
    // 处理位置信息
  },
  fail: function() {
    // 处理错误情况
  }
})

计算用户当前位置和活动位置距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 计算两个经纬度之间的距离（单位：米）
static getDistance(lat1, lon1, lat2, lon2) {
  const R = 6371e3; // 地球半径（单位：米）
  const radLat1 = (lat1 * Math.PI) / 180;
  const radLat2 = (lat2 * Math.PI) / 180;
  const a = radLat1 - radLat2;
  const b = ((lon1 * Math.PI) / 180) - ((lon2 * Math.PI) / 180);
  const distance =
    2 *
    R *
    Math.asin(
      Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
    );
  return distance;
}

判断位置距离是否超过活动范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (distance <= this.data.radius) {
  // 在范围内，打开地图并显示活动地点
  pageHelper.showSuccToast('签到成功！',2500,callback);
}else {
    // 不在范围内，提示用户距离过远
  let callback = () => {
    wx.reLaunch({
      url: '../../default/index/default_index'
    })
    wx.openLocation({
      latitude: activityLatitude,
      longitude: activityLongitude,
      name: '活动地点',
      scale: 15,
    });
  }
  pageHelper.showNoneToast('您距离活动地点较远，请前往活动附近区域！', 2500, callback);
}

5. 用户授权

在app.json中添加，声明小程序需要获取的权限，这些权限需要在用户授权后才能使用。

1
2
3
4
5
6
7
8
9
"permission": {
	"scope.userLocation": {
		"desc": "获取您当前位置信息用于小程序位置接口的效果展示"
       },
       "scope.userFuzzyLocation":{
         "desc":"获取您当前位置信息用于小程序位置接口的效果展示"
       }
},
 "requiredPrivateInfos": ["chooseLocation","getLocation"],

结语

微信小程序提供了一系列强大的位置接口，使得开发者可以轻松地实现位置相关的功能。从获取用户当前位置到展示地图，再到复杂的地理编码转换，这些接口都是构建位置感知应用不可或缺的工具。记得在开发时遵守用户隐私和相关法律法规，合理使用这些位置数据。

​

赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

正因为没有翅膀，<br>人们才会寻找飞翔的方法。