小程序地图上marker点击后改变尺寸并且将上个点击过的包括其他分类下的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-11 10:14:02 浏览: 138
实现这个功能可以通过以下步骤:
1. 在小程序地图上添加marker,并为每个marker设置一个唯一的id和分类。
2. 给每个marker绑定点击事件,点击后获取该marker的id和分类。
3. 将该marker的大小改变为需要的大小,可以使用marker的设置大小方法。
4. 遍历所有marker,如果该marker的id和分类不同于当前点击的marker,则将其大小恢复为原来的大小。
5. 将地图中心位置设置为当前点击的marker的位置。可以使用地图的设置中心位置方法。
以下是示例代码:
```
// 假设已经在页面中创建了一个地图和若干个marker
// 定义一个变量来保存上一个点击的marker的id和分类
var lastClickedMarker = {
id: '',
category: ''
}
// 绑定marker的点击事件
map.on('markerTap', function(e) {
// 获取当前点击的marker的id和分类
var currentId = e.markerId
var currentCategory = e.markerCategory
// 将当前点击的marker的大小改变为需要的大小
map.updateMarker(e.marker, {
width: 40,
height: 40
})
// 遍历所有marker,如果该marker的id和分类不同于当前点击的marker,则将其大小恢复为原来的大小
markers.forEach(function(marker) {
if (marker.id !== currentId || marker.category !== currentCategory) {
map.updateMarker(marker, {
width: 20,
height: 20
})
}
})
// 将地图中心位置设置为当前点击的marker的位置
var currentMarker = markers.find(function(marker) {
return marker.id === currentId && marker.category === currentCategory
})
map.moveToLocation({
latitude: currentMarker.latitude,
longitude: currentMarker.longitude
})
// 将当前点击的marker的id和分类保存到lastClickedMarker变量中
lastClickedMarker.id = currentId
lastClickedMarker.category = currentCategory
})
```
阅读全文