跳到主要内容

周边兴趣点搜索

介绍​

在小程序开发中，周边兴趣点搜索（POI Search）是一个常见的功能，它允许用户在地图上搜索附近的兴趣点（Points of Interest，POI），例如餐厅、商店、加油站等。通过结合地图和位置 API，开发者可以轻松实现这一功能，为用户提供便捷的定位服务。

本文将逐步讲解如何使用小程序的地图与位置 API 实现周边兴趣点搜索功能，并提供代码示例和实际应用场景。

1. 理解周边兴趣点搜索​

周边兴趣点搜索是指根据用户当前的地理位置，搜索附近特定类型的兴趣点。例如，用户可能想查找附近的咖啡馆、银行或医院。为了实现这一功能，我们需要以下步骤：

  1. 获取用户的当前位置。
  2. 调用地图 API 的搜索接口，传入位置和搜索关键词。
  3. 解析搜索结果并在地图上显示。

2. 获取用户当前位置​

在小程序中，我们可以使用 wx.getLocation API 获取用户的当前位置。以下是一个示例代码：

javascript
wx.getLocation({
  type: 'wgs84', // 返回 GPS 坐标
  success(res) {
    const latitude = res.latitude; // 纬度
    const longitude = res.longitude; // 经度
    console.log('当前位置：', latitude, longitude);
  },
  fail(err) {
    console.error('获取位置失败：', err);
  }
});
备注

type: 'wgs84' 表示返回 GPS 坐标，这是地图 API 常用的坐标格式。

3. 调用地图 API 搜索兴趣点​

获取到用户的位置后，我们可以使用 wx.request 调用地图 API 的搜索接口。以下是一个示例代码：

javascript
const key = 'YOUR_MAP_API_KEY'; // 替换为你的地图 API Key
const url = `https://api.map.com/place/around?location=${latitude},${longitude}&radius=1000&keyword=咖啡&key=${key}`;

wx.request({
  url: url,
  success(res) {
    const pois = res.data.results; // 获取搜索结果
    console.log('搜索结果：', pois);
  },
  fail(err) {
    console.error('搜索失败：', err);
  }
});
提示
  • radius 参数表示搜索半径（单位：米）。
  • keyword 参数表示搜索关键词，例如“咖啡”。

4. 解析并显示搜索结果​

搜索结果通常包含兴趣点的名称、地址、距离等信息。我们可以将这些信息展示在小程序的页面上。以下是一个简单的示例：

javascript
Page({
  data: {
    pois: [] // 存储搜索结果
  },
  onLoad() {
    this.searchNearbyPOIs();
  },
  searchNearbyPOIs() {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        const key = 'YOUR_MAP_API_KEY';
        const url = `https://api.map.com/place/around?location=${latitude},${longitude}&radius=1000&keyword=咖啡&key=${key}`;

        wx.request({
          url: url,
          success: (res) => {
            this.setData({
              pois: res.data.results
            });
          }
        });
      }
    });
  }
});

在页面的 WXML 文件中，我们可以这样显示搜索结果：

html
<view wx:for="{{pois}}" wx:key="id">
  <text>{{item.name}}</text>
  <text>{{item.address}}</text>
  <text>距离：{{item.distance}}米</text>
</view>

5. 实际应用场景​

场景 1：查找附近的餐厅​

用户打开小程序后，点击“查找餐厅”按钮，小程序会自动搜索并显示附近的餐厅列表。

场景 2：导航到最近的加油站​

用户在小程序中输入“加油站”，小程序会显示最近的加油站，并提供导航功能。

6. 总结​

通过本文的学习，你已经掌握了如何在小程序中实现周边兴趣点搜索功能。以下是关键步骤的回顾：

  1. 使用 wx.getLocation 获取用户当前位置。
  2. 调用地图 API 的搜索接口，传入位置和关键词。
  3. 解析搜索结果并展示在小程序页面上。

7. 附加资源与练习​

附加资源​

练习​

  1. 修改代码，使其支持搜索不同类型的兴趣点（例如银行、医院）。
  2. 尝试在地图上标记搜索到的兴趣点。
警告

在实际开发中，请确保获取用户位置时遵循隐私政策，并明确告知用户位置信息的使用目的。