使用React中的Uber或Ola等动画在Google地图上旋转标记

时间:2019-06-07 06:52:15

标签: ios react-native geolocation react-native-maps

我正在从事类似于UBER或OLA的项目。我为此使用了react-native-maps库。我已经使用React Native地理位置来获取当前位置。我也参考了此react-native-maps example。但标记器的旋转不起作用。有人可以帮忙吗?我在哪里错了?

而且此代码在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();
        }
      }
    }
  }

0 个答案:

没有答案