微信小程序如何将云数据库中的经纬度数据，获取并以列表形式展示在页面上，🧧红包送上。

Question

微信小程序如何将云数据库中的经纬度数据，获取并以列表形式展示在页面上，🧧红包送上。请直接上传源码截图，在此谢过！ 列表指的是点击列表中的经纬度地点，可以调用腾讯导航到这个位置。

Answer 1

首先，在小程序端使用 wx.cloud.callFunction 方法来调用云函数，在云函数中访问云数据库获取经纬度数据。

其次，在云函数中使用云数据库查询接口来获取云数据库中经纬度字段的数据。

最后，使用小程序端的 setData 方法将数据渲染到页面上，使用 wx:for 指令来循环展示数据。

以下是一个简单的例子：

Page({
  data: {
    coordinates: []
  },
  onLoad: function() {
    wx.cloud.callFunction({
      name: 'getCoordinates',
      success: res => {
        this.setData({
          coordinates: res.result
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  }
})

// 云函数代码
// 数据库名称为 'location'，集合名称为 'coordinates'
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

exports.main = async (event, context) => {
  try {
    return await db.collection('coordinates').get()
  } catch (e) {
    console.error(e)
  }
}

在前端页面中循环展示数据

<view wx:for="{{coordinates}}" wx:key="">
  <text>经度: {{item.longitude}}</text>
  <text>纬度: {{item.latitude}}</text>
</view>

注意：需要在云开发控制台中配置云函数,并且在小程序项目中引入cloud-functions模块。