单击新地图图标时不会恢复为正常大小

Question

当点击一个新的标记时，我的点击功能没有将地图图标返回到原来的大小，我似乎不知道为什么。下面是我使用的代码:

var infowindow = new google.maps.InfoWindow({
disableAutoPan: true,
isHidden:false,
closeBoxURL: "",
pane: "mapPane",
enableEventPropagation: true
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
map: map,
id: (locations[i][3]),
icon: (locations[i][4]),
optimize: false,
title: (locations[i][0]),
description: (locations[i][6])
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
sidebar.open('destination' + [i]);
marker.setIcon(locations[i][5]);
};
})(marker, i));

markers.push(marker);
}

点击后，图标像我想要的那样放大，并出现信息窗口。当我点击另一个图标时，信息窗口关闭前一个标记并移动到新的标记，但前一个标记仍然很大。

地图有多个不同类别的标记图像，所以我不能只分配一个图标并改变大小。在数据库中，每个标记有2个图像大小，较小的称为"(locations[I][4])"大一点的是"(locations[i][5])"

有什么建议吗?

Answer 1

您可以尝试做的是在构建它们时为每个标记设置进一步的自定义属性，这些属性将在click处理程序中作为该标记的属性可用。在某种程度上，您已经开始了这个过程，包括自定义属性，如optimize-采取更深入的一步，尽管这样做可能(完全未经测试)的方法:

var infowindow = new google.maps.InfoWindow({
disableAutoPan: true,
isHidden:false,
closeBoxURL: '',
pane: 'mapPane',
enableEventPropagation: true
});
var clickhandler=function(e){
/* set properties of the InfoWindow */
infowindow.setContent( this.content );
infowindow.open( map, this );
map.setCenter( this.getPosition() );

/* Custom tasks */
sidebar.open('destination' + this.index );

/* inspect the marker `images` property to get new image - large */
this.setIcon( this.images.large );
};
var toggleimages=function(){
markers.forEach( mkr=>{
mkr.setIcon( mkr.images.small )
})
};
var marker,properties;

for ( var i = 0; i < locations.length; i++ ) {
/* 
Create the standard markr properties with a few "custom" properties
added to aid the icon swapping.

New properties:
images
content
index

Moved outwith the new Marker constructor for easier reading only 
*/
properties={
index:i,
position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
map: map,
id:locations[i][3],
icon:locations[i][4],
optimize:false,
title:locations[i][0],
description:locations[i][6],

images:{
large:locations[i][5],
small:locations[i][4]
},
content:[ locations[i][0], locations[i][6] ].join(', ')
};



/* create the marker */
marker = new google.maps.Marker( properties );


google.maps.event.addListener( marker, 'click', function(e){
toggleimages.call(this,e);  // modify any other markers that have the large icon before
clickhandler.call(this,e);  // invoke clickhandler and set new large icon
}.bind( marker ));

markers.push( marker );
}