добавить эффект анимации импульса к маркеру карты angular agm

Я хочу добавить эту анимацию импульса к своим маркерам в angular. Я использую библиотеку agm для добавления карт Google в свой проект. . как я могу использовать css, чтобы добавить эту импульсную анимацию к моим маркерам? вот что я пробовал до сих пор:

<agm-map (mapReady)="mapReading()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="customTheme">
  <span class="pulse" *ngFor="let marker of markers">
    <agm-marker  [animation]="userLocationMarkerAnimation" [latitude]="marker.lat"
      [longitude]="marker.long" [iconUrl]="marker.icon">
    </agm-marker>
  </span>
</agm-map>

вот мой css:

.pulse {
  width: 150px;
  height: 150px;
  background: rgb(255, 0, 64);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 150px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
  }

  40% {
    box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
  }

  80% {
    box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
  }
}

google-maps angular
person geekymano    schedule 10.11.2019    source источник
comment
Может стоит добавить StackBlitz или поделиться проектом на GitHub   -  person Sergey    schedule 13.11.2019
comment
Я просто думаю о загрузке, но не могли бы вы создать угловую анимацию и добавить ее в [animation]="" на agm-marker ?   -  person Johannes Kraft    schedule 14.11.2019

Ответы (2)


arrow_upward
3
arrow_downward

В картах Google v3 изначально предусмотрено два типа анимации (а именно «ОТКАЧИВАНИЕ» и «ПАДЕНИЕ»). Ссылка – https://developers.google.com/maps/documentation/javascript/markers< /а>

Соответственно, AGM также предоставил то же самое, которое вы можете применить, установив свойство ввода анимации.

<agm-map (mapReady)="mapReading()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="customTheme">
    <agm-marker *ngFor="let marker of markers" [animation]="userLocationMarkerAnimation" [latitude]="marker.lat"
      [longitude]="marker.long" [iconUrl]="marker.icon">
    </agm-marker>
</agm-map>

Но если вы хотите применить индивидуальную CSS-анимацию к маркерам, вам придется создавать маркеры как пользовательские наложения, используя OverlayView. Ссылка — https://developers.google.com/maps/documentation/javascript/customoverlays< /а>

а также

https://www.sitepoint.com/animated-google-map-markers-css-javascript/

С помощью AGM вы можете создавать собственные наложения, используя agm-overlays. Вы можете найти руководство по установке и использованию здесь. - https://www.npmjs.com/package/agm-overlays

Ниже приведен очень простой пример с использованием вашего пользовательского CSS:

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-overlay [latitude]  = "lat" [longitude] = "lng" >
      <div class="pulse"><img src="{{myIcon}}" height="40" width="40"></div>
  </agm-overlay>
</agm-map>

Я создал рабочий образец того же на stackblitz.

https://stackblitz.com/edit/angular-pypxmk?file=src%2Fapp%2Fapp.component.html

person vsoni    schedule 16.11.2019

arrow_upward
0
arrow_downward

Пока вы не найдете правильное решение, agm дал две анимации,

ОТКАСЫВАЙТЕСЬ и ПАДАЕТЕ,

<agm-map (mapReady)="mapReading()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="customTheme">
  <span class="pulse" *ngFor="let marker of markers">
    <agm-marker  animation="BOUNCE " [latitude]="marker.lat"
      [longitude]="marker.long" [iconUrl]="marker.icon">
    </agm-marker>
  </span>
</agm-map>
person Shashan Sooriyahetti    schedule 15.11.2019