uniapp在支付宝小程序中使用map实现附近地点搜索功能

在uniapp开发支付宝小程序时，使用map组件实现附近地点搜索功能遇到问题：

  1. 如何获取用户当前位置坐标并显示在地图上？
  2. 调用支付宝小程序的搜索接口时，总是返回权限错误，需要配置哪些权限？
  3. 地图上的标记点（marker）点击事件不触发，该如何排查？
  4. 搜索结果的列表如何与地图联动，实现点击列表项定位到对应位置？
  5. 在真机调试时地图显示空白，但开发工具上正常，可能是什么原因？

希望有经验的朋友能分享一下具体的代码实现和注意事项。

2 回复

在uniapp中使用支付宝小程序的map组件实现附近地点搜索，可通过以下步骤：

  1. 使用uni.getLocation获取用户位置
  2. 调用支付宝小程序的my.search接口搜索周边POI
  3. 将结果坐标通过markers属性展示在地图上
  4. 可添加点击事件查看地点详情

注意：需要申请地图和搜索相关权限。


在UniApp中实现支付宝小程序的附近地点搜索功能，可以通过以下步骤完成：

1. 获取用户位置权限

首先需要获取用户的地理位置权限，使用 uni.authorize 和 uni.getLocation：

uni.authorize({
  scope: 'scope.userLocation',
  success: () => {
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.latitude = res.latitude
        this.longitude = res.longitude
        // 获取附近地点
        this.searchNearby()
      }
    })
  }
})

2. 实现附近地点搜索

使用支付宝小程序的 my.searchNearby API（注意：这是支付宝小程序特有API）：

searchNearby() {
  if (typeof my !== 'undefined' && my.searchNearby) {
    my.searchNearby({
      latitude: this.latitude,
      longitude: this.longitude,
      keywords: ['餐厅', '酒店'], // 搜索关键词
      success: (res) => {
        this.poiList = res.poiList // 保存搜索结果
        this.updateMapMarkers()
      },
      fail: (err) => {
        console.error('搜索失败:', err)
      }
    })
  }
}

3. 在地图上显示标记

在模板中使用 map 组件：

<template>
  <view>
    <map 
      id="myMap"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 100%; height: 300px;">
    </map>
  </view>
</template>

更新地图标记：

updateMapMarkers() {
  this.markers = this.poiList.map((poi, index) => {
    return {
      id: index,
      latitude: poi.latitude,
      longitude: poi.longitude,
      title: poi.name,
      iconPath: '/static/marker.png'
    }
  })
}

4. 数据定义

在 data 中定义必要数据：

data() {
  return {
    latitude: 0,
    longitude: 0,
    poiList: [],
    markers: []
  }
}

注意事项：

  1. 需要在 manifest.json 中配置支付宝小程序权限：
{
  "mp-alipay": {
    "requiredPermissions": [
      "userLocation",
      "location"
    ]
  }
}

  1. 支付宝小程序的 my.searchNearby 需要基础库版本 1.10.0 以上支持

  2. 如果搜索不到结果，检查：

    • 是否已授权地理位置权限
    • 坐标格式是否正确（建议使用 GCJ-02）
    • 关键词是否合理

这个实现方案使用了支付宝小程序的特定API，如果需要在多端兼容，可以考虑使用第三方地图服务（如高德、腾讯地图）的Web API来实现。

回到顶部