小程序云开发时,点击地图标记从云数据库中获取新的图标代码
时间: 2023-05-26 20:06:51 浏览: 103
首先,在小程序中创建一个地图组件,然后在地图上加入标记。
1. 点击标记时,触发事件并获取标记的经纬度信息。
2. 利用经纬度信息,在云函数中查询相关信息,并返回新的图标代码。
3. 在小程序中使用 `wx.createMapContext` 方法获取地图上下文,并调用 `mapContext.updateMarker` 方法更新标记的图标。
以下是详细的代码实现:
1. 在小程序中添加地图组件并加入标记:
```html
<view class="map-container">
<map id="map" style="height: 100%" bindmarkertap="onMarkerTap"></map>
</view>
```
```js
const mapContext = wx.createMapContext('map')
Page({
data: {
markers: [{
id: 0,
latitude: 39.90469,
longitude: 116.40717,
iconPath: '/images/marker.png',
}],
},
onMarkerTap(e) {
const { markerId, latitude, longitude } = e.detail
wx.cloud.callFunction({
name: 'getMarkerIcon',
data: { latitude, longitude },
success: res => {
const { iconPath } = res.result
const newMarkers = this.data.markers.map(marker => {
if (marker.id === markerId) {
return { ...marker, iconPath }
}
return marker
})
this.setData({ markers: newMarkers })
mapContext.updateMarker({ markerId, iconPath })
},
fail: console.error,
})
},
})
```
2. 在云函数中查询相关信息并返回新的图标代码:
```js
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const collection = db.collection('markers')
exports.main = async (event, context) => {
const { latitude, longitude } = event
const { data } = await collection.where({
latitude: db.command.eq(latitude),
longitude: db.command.eq(longitude),
}).get()
const { iconPath } = data[0]
return { iconPath }
}
```
这样,点击地图标记时,就会触发 `onMarkerTap` 方法,从云函数中查询相关信息,并返回新的图标代码。最后调用 `mapContext.updateMarker` 方法更新标记的图标。
阅读全文