点击MARKER切换图标,上一个点击的MARKER变回原样
时间: 2024-05-02 13:01:29 浏览: 120
这个问题涉及到两个方面:切换图标和恢复原样。
首先,切换图标可以通过以下步骤实现:
1. 创建需要切换的不同图标,例如 `icon1.png` 和 `icon2.png`。
2. 在 `Marker` 对象的构造函数中,设置 `icon` 属性为默认的图标 `icon1.png`。
```javascript
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'icon1.png'
});
```
3. 添加点击事件监听器,当点击 `Marker` 时,通过 `setIcon()` 方法切换图标。
```javascript
marker.addListener('click', function() {
if (marker.getIcon() === 'icon1.png') {
marker.setIcon('icon2.png');
} else {
marker.setIcon('icon1.png');
}
});
```
其次,恢复原样可以通过保存上一个点击的 `Marker` 对象并在下一次点击时恢复其图标实现。具体步骤如下:
1. 在定义 `Marker` 对象时,保存上一个点击的 `Marker` 对象。
```javascript
var prevMarker = null;
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'icon1.png'
});
marker.addListener('click', function() {
// 恢复上一个点击的 Marker 的图标
if (prevMarker !== null) {
prevMarker.setIcon('icon1.png');
}
// 切换当前 Marker 的图标
if (marker.getIcon() === 'icon1.png') {
marker.setIcon('icon2.png');
} else {
marker.setIcon('icon1.png');
}
// 保存当前 Marker 为上一个点击的 Marker
prevMarker = marker;
});
```
2. 在下一次点击 `Marker` 时,恢复上一个点击的 `Marker` 的图标。
```javascript
otherMarker.addListener('click', function() {
// 恢复上一个点击的 Marker 的图标
if (prevMarker !== null) {
prevMarker.setIcon('icon1.png');
}
// 切换当前 Marker 的图标
if (otherMarker.getIcon() === 'icon1.png') {
otherMarker.setIcon('icon2.png');
} else {
otherMarker.setIcon('icon1.png');
}
// 保存当前 Marker 为上一个点击的 Marker
prevMarker = otherMarker;
});
```
上述代码中,`prevMarker` 变量保存了上一个点击的 `Marker` 对象,初始值为 `null`。在每次点击 `Marker` 时,先恢复上一个点击的 `Marker` 的图标,然后再切换当前 `Marker` 的图标。最后,将当前 `Marker` 对象保存为上一个点击的 `Marker`,以备下一次点击时恢复图标。
阅读全文