"react-google-maps"のマーカーにアニメーションを追加するにはどうすればいいですか？

Question

ドキュメント - https://github.com/tomchentw/react-google-maps/tree/v5.1.0#documentation - マーカーに「アニメーション」を追加できると言います。しかし、私はアニメーションを追加する方法を把握していないようです。私が追加しようとした他のプロパティもありますが、できませんでした。

const ProvidenceMap = withGoogleMap(props => (
    <GoogleMap 
    defaultZoom={13} 
    defaultCenter={{ lat: 41.8240, lng: -71.4128 }} 
    > 

    {props.markers.map((marker, index) => (
     <Marker 
     key={index} 
     position={marker.position} 
     onClick={() => props.onMarkerClick(marker)} 
     animation={marker.animation} 
     > 

     {marker.showInfo && (
      <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}> 
      { 
       <div className="info-window">this is the info window</div> 
      } 
      </InfoWindow> 
     )} 
     </Marker> 
    ))}; 
    </GoogleMap> 
)); 

class ContentContainer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     landing: true, 
     map: false, 
     wishListTitle: "", 
     markers: [ 
     { 
      position: {lat: 41.8240, lng:-71.4128}, 
      showInfo: false, 
      animation: "DROP", 
     }, 
     { 
      position: {lat: 41.8250, lng: -71.4338}, 
      showInfo: false, 
      animation: "DROP", 
     } 
     ], 
    } 
    } 
    /* click handlers and render() have been omitted for simplicity */ 
} 

Answer 1

animation小道具がgoogle.maps.Markerクラスのofficial documentationにあなたを指し言及READMEの一部を：コードスニペットは、下に掲載されています。

setAnimation(animation: Animation)

...あなたを伝えることanimation引数と、おそらく、animationリアクト小道具を-なければならないことがアニメーションの種類：資料には、setAnimationなどのためのメソッドシグネチャを提供します。リンクをクリックすると、Animation constantsに移動し、google.maps.Animationに2つの定数：BOUNCEとDROPが定義されていることがわかります。

これは、この小道具の値がgoogle.maps.Animation.BOUNCEまたはgoogle.maps.Animation.DROPのいずれかであることを示しています。そしてそう：

[ 
    { 
    position: {lat: 41.8240, lng:-71.4128}, 
    showInfo: false, 
    animation: google.maps.Animation.DROP, 
    }, 
    { 
    position: {lat: 41.8250, lng: -71.4338}, 
    showInfo: false, 
    animation: google.maps.Animation.DROP, 
    } 
], 

これは、あなたがother google.maps.* constants are used反応するとGoogleマップの例で見ることができるものと一致します。