小程序地图上marker点击后改变尺寸并且将上个点击过的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-15 16:16:10 浏览: 15
实现这个功能,需要以下步骤:
1. 监听地图的tap事件,获取点击的marker的id。
2. 判断该marker是否已经被点击过,如果已经被点击过,则将其尺寸恢复原来大小。
3. 将该marker的尺寸改变为指定大小,同时将地图中心位置以该marker为中心。
4. 记录该marker的id和尺寸,以便下次恢复原来大小。
以下是代码示例:
```
// 定义全局变量
var lastMarkerId = ""; // 上一个被点击的marker的id
var lastMarkerSize = ""; // 上一个被点击的marker的尺寸
// 监听地图的tap事件
map.on("tap", function(e) {
var markerId = e.markerId; // 获取点击的marker的id
if (markerId) {
// 判断该marker是否已经被点击过
if (markerId == lastMarkerId) {
// 将上一个被点击的marker的尺寸恢复原来大小
map.getMarkerById(lastMarkerId).setScale(lastMarkerSize);
}
// 将该marker的尺寸改变为指定大小
var marker = map.getMarkerById(markerId);
lastMarkerSize = marker.getScale();
marker.setScale(1.5);
// 将地图中心位置以该marker为中心
map.setCenter({
latitude: marker.getPosition().latitude,
longitude: marker.getPosition().longitude
});
// 记录该marker的id和尺寸
lastMarkerId = markerId;
}
});
```
在以上代码中,我们通过监听地图的tap事件,获取了点击的marker的id。然后,我们判断该marker是否已经被点击过,如果已经被点击过,则将其尺寸恢复原来大小;否则,将该marker的尺寸改变为指定大小,并将地图中心位置以该marker为中心。最后,我们记录该marker的id和尺寸,以便下次恢复原来大小。