Поворот маркера над картой Google с анимацией, такой как Uber или Ola в React Native - PullRequest
Новая
       21

Поворот маркера над картой Google с анимацией, такой как Uber или Ola в React Native

0 голосов
/ 07 июня 2019

Я работаю над проектом, похожим на UBER или OLA.Для этого я использовал библиотеку response-native-maps .Я использовал React Native geolocation для получения текущего местоположения.Я также взял ссылку на этот пример response-native-maps .но вращение маркера не работает.кто-нибудь может помочь?где я не прав?

И этот код хорошо работает в Android, а не в iOS

Заранее спасибо.

Ниже я делюсь своим кодом

render(){
     return(
           <MapView
              ref={component => (this.map = component)}
              provider={PROVIDER_GOOGLE}
              style={styles.mapStyle}
            >

              <Marker. Animated
                coordinate={{
                  latitude: this.state.currentLocation.latitude,
                  longitude: this.state.currentLocation.longitude
                }}
                ref={marker => {
                  this.marker = marker;
                }}
                flat
                style={{
                  transform: [
                    {
                      rotate:
                        this.state.currentLocation.heading === 
                   undefined
                          ? "0deg"
                          : `${this.state.currentLocation.heading}deg`
                    }
                  ]
                }}
                image={"rickshaw"}
              />
)}

И я обновил местоположение маркера в componentDidUpdate 

 componentDidUpdate(prevProps, prevState) {
    if (prevState.currentLocation !== this.state.currentLocation) {
      let newCoordinate = this.state.currentLocation;
      let previousLocation = prevState.currentLocation;
      if (utility.getOS() === "android") {
        console.log("update marker");
        if (this.marker) {
          this.marker._component.animateMarkerToCoordinate(
            this.state.currentLocation,
            1000
          );
        }
      } else {
        if (newCoordinate !== null && previousLocation !== null) {
          const oldCoordinate = new AnimatedRegion({
            latitude: previousLocation.latitude,
            longitude: previousLocation.longitude
          });
          oldCoordinate.timing(newCoordinate).start();
        }
      }
    }
  }
...