您可以在React Native地图中自定义当前位置标记吗？

Question

我想使用自定义标记图像而不是脉冲蓝点 - 有没有办法在使用适用于 ios 的苹果地图和适用于 Android 的谷歌地图的反应本机地图中自定义此图像？

Answer 1

据我所知，您无法更改默认的当前位置点。解决方法是将用户的位置与您的自定义图像一起传递到

<Marker />

中，并关闭

showsUserLocation

以隐藏默认的蓝点。这是标记文档。

然后您可以使用 Geolocation.watchPosition 跟踪用户的位置。如果您将用户的位置设置为状态，它将在用户移动时触发重新渲染。

Answer 2

您可以创建自定义标记并连接事件侦听器来跟踪用户并在用户移动时更新标记的位置。

该事件监听器在框架内可用。 https://facebook.github.io/react-native/docs/geolocation.html#watchposition

Answer 3

添加其他人所说的内容，您可以直接使用

MapView

的

onUserLocationChange

事件，而无需安装像

@react-native-community/geolocation

这样的依赖项。然后您可以使用状态来跟踪用户位置

  const [userLocation, setUserLocation] = useState<(LatLng & { heading: number }) | null>(null);

  return (
    <MapView
      showsUserLocation={false}
      onUserLocationChange={(location) => {
        if (location.nativeEvent.coordinate) {
          const { longitude, latitude, heading } = location.nativeEvent.coordinate;
          setUserLocation({ longitude, latitude, heading });
        } else {
          setUserLocation(null);
        }
      }}
    >
      {userLocation && (
        <Marker
          coordinate={{ longitude: userLocation.longitude, latitude: userLocation.latitude }}
          rotation={userLocation.heading}
          tappable={false}
          pointerEvents="none"
        />
      )}
    </MapView>
  );