微信小程序 + Go 开发《共享遛狗》（第四篇）

2023-10-01 18:16:49

利用小程序记录你的遛狗旅程

简介

作为宠物主人，与我们毛茸茸的朋友共度时光是最大的乐趣之一。而散步对于狗的幸福和健康至关重要，它不仅可以促进身体活动，还可以加强与主人的联系。为了增强你的遛狗体验，微信小程序提供了一种便捷的方式来记录你的狗的散步轨迹和相关信息。

添加点击事件

第一步是添加一个点击事件来启动遛狗追踪。在小程序的 WXML 文件中，找到“开始遛狗”按钮并添加 bindtap 属性：

<button bindtap="startWalking">开始遛狗</button>

在对应的 WXS 文件中，定义 startWalking 函数：

startWalking() {
  this.isWalking = true;
  wx.showToast({
    title: '开始遛狗',
    icon: 'success',
    duration: 2000
  });
  this.startLocationUpdate();
}

当用户点击“开始遛狗”按钮时，startWalking 函数将被调用，它会将 isWalking 属性设置为 true 以指示遛狗开始，显示一个开始遛狗的提示，并调用 startLocationUpdate 函数开始记录位置。

模拟开始遛狗

为了模拟遛狗过程中的实时定位，我们需要使用 wx.startLocationUpdate 函数，它可以按给定的时间间隔获取位置信息。在 WXS 文件中，定义 startLocationUpdate 函数：

startLocationUpdate() {
  wx.startLocationUpdate({
    success: (res) => {
      wx.getLocation({
        success: (res) => {
          this.locationList.push({
            latitude: res.latitude,
            longitude: res.longitude,
            accuracy: res.accuracy,
            altitude: res.altitude,
            speed: res.speed,
            verticalAccuracy: res.verticalAccuracy,
            horizontalAccuracy: res.horizontalAccuracy
          });
          this.setData({
            locationList: this.locationList
          });
        }
      });
    },
    fail: (err) => {
      console.error(err);
    }
  });
}

当调用 wx.startLocationUpdate 函数时，它将按默认每 2 秒的间隔获取位置信息。如果获取位置信息成功，则 wx.getLocation 函数将获取当前位置信息，并将该信息存储到数据中。然后更新界面上的位置信息。

实现结束页面

遛狗结束后，你需要显示一个结束页面，以便用户查看遛狗的轨迹和相关信息。在 WXML 文件中，添加结束页面的代码：

<view class="end-page" hidden="{{!isWalking}}">
  <view class="end-page-title">遛狗结束</view>
  <!-- 展示遛狗相关信息 -->
  <view class="end-page-info">
    <!-- 展示距离 -->
    <view class="end-page-info-item">
      <text>距离：</text>
      <text>{{distance}} 米</text>
    </view>
    <!-- 展示时长 -->
    <view class="end-page-info-item">
      <text>时长：</text>
      <text>{{duration}} 分钟</text>
    </view>
    <!-- 展示平均速度 -->
    <view class="end-page-info-item">
      <text>平均速度：</text>
      <text>{{averageSpeed}} 米/分钟</text>
    </view>
    <!-- 展示最高速度 -->
    <view class="end-page-info-item">
      <text>最高速度：</text>
      <text>{{maxSpeed}} 米/分钟</text>
    </view>
  </view>
  <!-- 展示地图 -->
  <view class="end-page-map">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" polyline="{{polyline}}" show-location></map>
  </view>
  <!-- 结束遛狗按钮 -->
  <button bindtap="endWalking">结束遛狗</button>
</view>

在 WXS 文件中，定义 endWalking 函数：

endWalking() {
  wx.stopLocationUpdate();
  wx.showToast({
    title: '遛狗结束',
    icon: 'success',
    duration: 2000
  });
  this.isWalking = false;
  this.calculateWalkingInfo();
  this.setData({
    isWalking: this.isWalking,
    distance: this.distance,
    duration: this.duration,
    averageSpeed: this.averageSpeed,
    maxSpeed: this.maxSpeed,
    markers: this.markers,
    polyline: this.polyline
  });
}

当用户点击“结束遛狗”按钮时，endWalking 函数将被调用，它会停止记录位置，显示遛狗结束的提示，将 isWalking 属性设置为 false 以指示遛狗结束，计算遛狗的距离、时长、平均速度和最高速度，并更新界面上的遛狗信息。

记录定位

为了记录遛狗过程中的位置信息，我们需要使用 wx.getLocation 函数。在 WXS 文件中，定义 getLocation 函数：

getLocation() {
  wx.getLocation({
    success: (res) => {
      this.locationList.push({
        latitude: res.latitude,
        longitude: res.longitude,
        accuracy: res.accuracy,
        altitude: res.altitude,
        speed: res.speed,
        verticalAccuracy: res.verticalAccuracy,
        horizontalAccuracy: res.horizontalAccuracy
      });
      this.setData({
        locationList: this.locationList
      });
    },
    fail: (err) => {
      console.error(err);
    }
  });
}

wx.getLocation 函数将获取当前位置信息，并将该信息存储到数据中。然后更新界面上的位置信息。

常见问题解答

如何开始记录遛狗？
点击小程序中的“开始遛狗”按钮即可。
如何结束遛狗并查看信息？
遛狗结束后，点击“结束遛狗”按钮。结束页面将显示遛狗的距离、时长、平均速度、最高速度和地图轨迹。
如何获得更准确的位置信息？
确保打开设备的 GPS 定位功能。
我的小程序无法记录位置信息。怎么办？
检查你的代码是否正确调用了 wx.startLocationUpdate 和 wx.getLocation 函数。还应检查你的小程序是否具有位置权限。
遛狗时如何查看实时位置？
小程序中没有实时显示遛狗位置的功能。结束遛狗后，你可以在结束页面查看地图轨迹。