Javascript 谷歌地图标记放置动画不一致

Javascript 谷歌地图标记放置动画不一致,javascript,typescript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Typescript,Google Maps,Google Maps Api 3,Google Maps Markers,我在angular 10中使用google maps API,我发现切换DROP动画时存在一些不一致之处 上的JSFIDLE有一个切换反弹动画的演示 然而,我的用例是在一张地图上有多个标记,每次单击一个标记时,它都会落下(而不是反弹)。我试图通过在地图上添加第二个标记并对这两个标记都使用切换来修改JSFIDLE 关于不同动画的Marker.animation和Marker.animating属性,我找不到很多文档。我怀疑当标记具有放置动画时,动画完成后,这两个属性将设置为null marker.

我在angular 10中使用google maps API,我发现切换DROP动画时存在一些不一致之处

上的JSFIDLE有一个切换反弹动画的演示

然而,我的用例是在一张地图上有多个标记,每次单击一个标记时,它都会落下(而不是反弹)。我试图通过在地图上添加第二个标记并对这两个标记都使用切换来修改JSFIDLE

关于不同动画的
Marker.animation
Marker.animating
属性,我找不到很多文档。我怀疑当标记具有放置动画时,动画完成后,这两个属性将设置为null

marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))

上述操作不起作用。

若要再次放置标记,请将
map
属性设置为
null
(将其从贴图中删除),然后再次设置动画,并将标记添加到贴图中

marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);

代码片段:

//下面的示例在瑞典斯德哥尔摩使用拖放创建标记
//动画。单击标记将在反弹之间切换动画
//动画和无动画。
让标记;
函数initMap(){
const map=new google.maps.map(document.getElementById(“map”){
缩放:13,
中心:{
拉脱维亚:59.325,
液化天然气:18.07
},
});
marker=新的google.maps.marker({
地图,
真的,
动画:google.maps.animation.DROP,
职位:{
拉脱维亚:59.327,
液化天然气:18.067
},
});
marker.addListener(“单击”,函数(){
切换下降(地图);
});
}
功能切换下拉列表(映射){
marker.setMap(空);
setAnimation(google.maps.Animation.DROP);
marker.setMap(map);
}
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高:100%;
}
/*可选:使示例页面填充窗口*/
html,
身体{
身高:100%;
保证金:0;
填充:0;
}

标记动画