Question

我正在制作一个React Native应用程序，其中显示了公共汽车的实时位置。我正在使用react-native-maps。标记和实时位置运行正常，但我也找不到能显示公交车方向的标记。

按方向，我的意思是公交车在向左，向右等方向旋转。像这样：

如何显示这样的标记？

Answer 1

您可以使用heading angle来实现，从公共汽车上获得的方向应该有一个航向值。例如，您将获得一个带有：

的位置对象

{ lat: 123, lng: 123, heading: 350 }

首先请确保您正在从该位置接收航向角。如果是这样，那么您需要使用Animated marker来实现。

例如：

在您的MapView

<MapView.Marker.Animated 
        coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
        ref={marker => { this.marker = marker }}
        flat
        style={{ transform: [{
          rotate: origin.heading === undefined ? '0deg' : `${origin.heading}deg`
        }]
      }}
        >
        <Image
          style={{ 
            height: 25,
            width: 25,
            transform: [{
            rotate: '270deg'
            }]
          }}
          source={require('../../assets/car.png')}
        />
      </MapView.Marker.Animated>

在这里，origin.lat和origin.lng代表纬度和经度，如果您以字符串形式接收它们，则可以将它们解析为Number，并且标题指的是汽车的方向，并且该图像偏离了您的汽车徽标，并且图像中的旋转仅是对其进行一点调整（这并不重要）。

现在您已经完成了50％，现在来看componentWillReceiveProps函数，在这里，您需要根据标题更新方向。

componentWillReceiveProps(nextProps) {
const duration = 1000;

if (this.props.liveLocation.origin !== nextProps.liveLocation.origin) {
  const newCoordinate = {
    latitude: Number(nextProps.liveLocation.origin.lat),
    longitude: Number(nextProps.liveLocation.origin.lng)
  };


  if (Platform.OS === 'android') {
    if (this.marker) {
      this.marker._component.animateMarkerToCoordinate(
        newCoordinate,
        duration
      );
    }
  } else if (this.props.liveLocation.origin != null) {
    const oldCoordinate = new AnimatedRegion({
      latitude: Number(this.props.liveLocation.origin.lat),
      longitude: Number(this.props.liveLocation.origin.lng)
    });
    oldCoordinate.timing(newCoordinate).start();
    }
}

}

对于ios，它不能完美运行， flat道具在旋转地图时不会让标记内的图像旋转，但是很遗憾，它不适用于ios，您可以为iOS禁用地图旋转。

您也可以在这里访问以获取更多参考。 https://github.com/react-community/react-native-maps/issues/1701

根据用户的指示生成标记

1 个答案: