小程序云开发地图上marker点击后改变尺寸并且将上个点击过的包括其他分类下的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-12 11:20:22 浏览: 30
可以使用以下步骤实现:
1. 在 marker 的点击事件中,获取到该 marker 的分类和 ID。
2. 使用 `this.createMapContext()` 方法获取地图上下文对象。
3. 使用 `this.createSelectorQuery()` 方法获取页面节点信息。
4. 使用 `selectorQuery.select()` 方法获取到需要修改大小的 marker。
5. 使用 `animation.scale()` 方法创建动画对象,并设置缩放比例。
6. 使用 `animation.step()` 方法设置动画的时间和缓动函数。
7. 使用 `this.setData()` 方法更新 marker 的样式。
8. 遍历所有 marker,将除当前点击的 marker 外的其他 marker 恢复原来大小。
9. 使用 `this.mapCtx.moveToLocation()` 方法将地图中心位置设置为当前点击的 marker 位置。
以下是示例代码:
```
// marker 点击事件
onMarkerTap(e) {
const { id, category } = e.markerId; // 获取 marker 的分类和 ID
// 获取地图上下文对象
const mapCtx = this.createMapContext('map');
// 获取页面节点信息
const selectorQuery = this.createSelectorQuery();
selectorQuery.select(`#${category}-${id}`).boundingClientRect();
selectorQuery.exec(res => {
const targetMarker = res[0]; // 获取需要修改大小的 marker
const animation = wx.createAnimation({
duration: 500, // 动画时间
timingFunction: 'ease-out' // 缓动函数
});
animation.scale(2).step(); // 设置缩放比例
this.setData({
[`markers[${category}][${id}].width`]: targetMarker.width * 2, // 更新 marker 的宽度
[`markers[${category}][${id}].height`]: targetMarker.height * 2, // 更新 marker 的高度
[`markers[${category}][${id}].animation`]: animation.export() // 更新 marker 的动画
});
// 遍历所有 marker,将除当前点击的 marker 外的其他 marker 恢复原来大小
for (let key in this.data.markers) {
if (key !== category) {
for (let i in this.data.markers[key]) {
if (this.data.markers[key][i].width !== 30) {
this.setData({
[`markers[${key}][${i}].width`]: 30,
[`markers[${key}][${i}].height`]: 30
});
}
}
} else {
for (let i in this.data.markers[key]) {
if (i !== id && this.data.markers[key][i].width !== 30) {
this.setData({
[`markers[${key}][${i}].width`]: 30,
[`markers[${key}][${i}].height`]: 30
});
}
}
}
}
// 将地图中心位置设置为当前点击的 marker 位置
mapCtx.moveToLocation({
latitude: e.latitude,
longitude: e.longitude,
complete: () => {}
});
});
}
```
阅读全文