Question

如何在AGM Map Angular 2+中添加动画弹跳标记？像这样：

Person

PLUNKER：

https://developers.google.com/maps/documentation/javascript/examples/marker-animations

Answer 1

来自图书馆：

 application/json

Answer 2

不确定您是否仍在寻找答案，但似乎标记动画在定义地图之前就已渲染/初始化。

相反，我要做的是：

<agm-map
  (mapReady)="mapReading()"
  [zoom]="14"
  [latitude]="lat"
  [longitude]="lng"
></agm-map>

然后此函数的作用很简单：

  userLocationMarkerAnimation: string;

  mapReading() {
    this.userLocationMarkerAnimation = 'BOUNCE';
  }

然后在标记上进行绑定：

  <agm-marker
    [animation]="userLocationMarkerAnimation"
    [latitude]="lat"
    [longitude]="lng"
  ></agm-marker>

Answer 3

仅供参考，以供大家阅读。似乎他们在动画方面遇到的所有问题都已解决。

现在不再需要mapReady函数和类似的东西您可以将动画属性直接放在标记上，按预期工作

[animation]="'BOUNCE'"

我使用选项来禁用/启用点击动画

在您的.ts文件中

bankina: string = 'BOUNCE'; //Set to null if you don't want it on start

bankinaAnimate(){
if (this.bankina !== null) {
  this.bankina = null;
} else {
  this.bankina = 'BOUNCE';
}}

在您的html文件中

<agm-marker
(markerClick)="bankinaAnimate()"
[animation]="bankina"

动画弹跳标记AGM地图

3 个答案: