在React中設置標記超時

Question

使用標記的數組，此Marker組件渲染中的動畫道具會得到一個標記，如果有一個則反彈，如果有多個則下降。

<Marker
  key={index}
  position={{lat: marker.lat, lng: marker.lng}}
  onClick={() => props.handleMarkerClick(marker)}
  animation={array.length === 1 ? google.maps.Animation.BOUNCE : google.maps.Animation.DROP}
>

但是，我的目標是為反彈設置750ms超時（基於對另一個SO問題的答案 ）。 我無法使用條件三元運算符執行此操作，因此我為此進行了兩次嘗試創建一個函數，將Marker組件中的animation屬性替換為animation={array.length === 1 ? bounceMarker() : google.maps.Animation.DROP} animation={array.length === 1 ? bounceMarker() : google.maps.Animation.DROP}都出現了問題。

我以為可以使用，但是使用google.maps.Animation.BOUNCE; 引發ESLint錯誤“預期分配或函數調用，而是看到一個表達式。”

  const bounceMarker = () => {
    google.maps.Animation.BOUNCE;
    setTimeout(() => {
      marker.setAnimation(null);
    }, 750);
  };

該函數基於Google的標記教程 ，並導致錯誤“ marker.getAnimation不是函數”：

      const bounceMarker = () => {
        if (marker.getAnimation() !== null) {
          marker.setAnimation(null);
        } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
          setTimeout(() => {
            marker.setAnimation(null);
          }, 750);
        }
      };

如果有用的話，這是此文件中的完整代碼，其中注釋了兩個功能：

// Specifies global variable to ESLint (bundled with create-react-app), circumventing no-undef rule. See https://eslint.org/docs/user-guide/configuring#specifying-globals
/* global google */
// This component's code is from react-google-maps implementation instructions https://tomchentw.github.io/react-google-maps/#installation

import React, { Component , Fragment } from 'react';
import { withScriptjs , withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      zoom={props.zoom}
      defaultCenter={{ lat: 47.6093, lng: -122.3309 }}
    >
      {/* If there are markers, filters all visible markers (creating new array) then maps over newly created array taking the marker and marker's array index as arguments, rendering each Marker component with the marker index set as the key and the marker's lat and long as the position */}
      {props.markers &&
        props.markers.filter(marker => marker.isVisible)
        // "Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity ... When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort" https://reactjs.org/docs/lists-and-keys.html
        .map((marker, index, array) => {
          // const bounceMarker = () => {
          //   if (marker.getAnimation() !== null) {
          //     marker.setAnimation(null);
          //   } else {
          //     marker.setAnimation(google.maps.Animation.BOUNCE);
          //     setTimeout(() => {
          //       marker.setAnimation(null);
          //     }, 750);
          //   }
          // };
          // const bounceMarker = () => {
          //   google.maps.Animation.BOUNCE;
          //   setTimeout(() => {
          //     marker.setAnimation(null);
          //   }, 750);
          // };

          const venueInfo = props.venues.find(venue => venue.id === marker.id);
          return (
            <Marker
            key={index}
            position={{lat: marker.lat, lng: marker.lng}}
            // Marker click event listener, defined in App component class
            onClick={() => props.handleMarkerClick(marker)}
            animation={array.length === 1 ? bounceMarker() : google.maps.Animation.DROP}
            >
            {/* Show marker's InfoWindow when its isOpen state is set to true (set in app.js) */}
            {marker.isOpen &&
              <InfoWindow>
                {/* If a venueInfo is not falsey and: 1) if there's a name and bestPhoto property, return the venue photo and name; 2) if there's only a name property, display the name only; 3) if there's only a photo property, display the photo only. If neither are available and/or venueInfo is falsy display text indicating no info available. See SO question about multiple ternary operators https://stackoverflow.com/questions/7757549/multiple-ternary-operators */}
                {venueInfo && venueInfo.name && venueInfo.bestPhoto ?
                <Fragment>
                <p>{venueInfo.name}</p>
                <img src={`${venueInfo.bestPhoto.prefix}200x200${venueInfo.bestPhoto.suffix}`}
                // Screen readers already announce as image; don't need the word "image", "photo", etc.
                alt={"Venue"}
                />
                </Fragment> : venueInfo && venueInfo.name ? <p>{venueInfo.name}</p> : venueInfo && venueInfo.bestPhoto ? <img    src={`${venueInfo.bestPhoto.prefix}200x200${venueInfo.bestPhoto.suffix}`}
                // Screen readers already announce as image; don't need the word "image", "photo", etc.
                alt={"Venue"}
                /> : <p>No info available</p>}
              </InfoWindow>
            }
            </Marker>
          );
      })}
    </GoogleMap>
  ))
);

export default class Map extends Component {
  render() {
    return (
      <MyMapComponent
        // This is making the this.setState passed into Map component (as its prop) inside App's component class's render method available to MyMapComponent, which is how props from this.setState are eventually included inside MyMapComponent class (such as zoom={props.zoom})
        {...this.props}
        isMarkerShown
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDjl8LxY7Edfulq6t_VDaQsYY4ymPjwN0w"
        // CSS declarations are placed in double curly braces because attributes accept JS objects; this is how to include an object literal. See https://stackoverflow.com/questions/22671582/what-is-the-purpose-of-double-curly-braces-in-reacts-jsx-syntax
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%`, width: `75%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    );
  }
}

Answer 1

您收到此錯誤

marker.getAnimation不是一個函數

因為marker不是實際的google.maps.Marker對象。

而不是渲染標記並隨后更新Marker.animation屬性，如何渲染具有超時的標記（基本上與使用setTimeout（）的“標記動畫”示例中演示的方法相同）？

為此，建議引入一種狀態來保持動畫標記

class MarkersAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: []
    };
  }

  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
        {this.state.markers.map((place, i) => {
          return (
            <Marker
              animation={google.maps.Animation.BOUNCE}
              id={place.id}
              key={place.id}
              position={{ lat: place.lat, lng: place.lng }}
            />
          );
        })}
      </GoogleMap>
    );
  }

  componentDidMount() {
    const { markers, delay } = this.props;
    this.interval = setInterval(() => {
      this.setState(prev => ({
        markers: prev.markers.concat([markers.shift()])
      }));
      if (!markers.length) clearInterval(this.interval);
    }, delay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

這是一個演示