小程序地图上marker点击后改变尺寸并且将上个点击过的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-14 14:14:02 浏览: 9
可以通过以下步骤实现:
1. 在marker的点击事件中,获取当前点击的marker对象和地图对象。
2. 遍历所有的marker对象,将除当前点击的marker外的其他marker恢复原来的大小。
3. 使用marker对象的setMap方法将当前marker的尺寸放大。
4. 使用地图对象的setCenter方法将地图的中心位置设置为当前marker的位置。
下面是示例代码:
```javascript
// 定义一个全局变量,用于记录上次点击的marker对象
var lastClickedMarker = null;
// marker点击事件
marker.on('click', function () {
// 获取当前点击的marker对象和地图对象
var currentMarker = this;
var map = currentMarker.getMap();
// 遍历所有的marker对象
map.getMarkers().forEach(function (marker) {
// 将除当前点击的marker外的其他marker恢复原来的大小
if (marker !== currentMarker && marker !== lastClickedMarker) {
marker.setOptions({ iconSize: [20, 30] });
}
});
// 改变当前点击的marker的尺寸
currentMarker.setOptions({ iconSize: [30, 40] });
// 将地图的中心位置设置为当前marker的位置
map.setCenter(currentMarker.getLatLng());
// 记录当前点击的marker对象
lastClickedMarker = currentMarker;
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![sb3](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)