我尝试在React-mapbox-gl中显示用户位置和标题指示器。
import * as React from "react";
import ReactMapGL, { GeolocateControl } from "react-map-gl";
const geolocateControlStyle = {
right: 10,
top: 10
};
function App() {
const [viewport, setViewport] = React.useState({
longitude: -122.45,
latitude: 37.78,
zoom: 14
});
return (
<ReactMapGL
{...viewport}
width="80vw"
height="80vh"
onViewportChange={setViewport}
mapboxApiAccessToken={
"<token here>"
}
>
<GeolocateControl
style={geolocateControlStyle}
positionOptions={{ enableHighAccuracy: true }}
trackUserLocation={true}
auto
/>
</ReactMapGL>
);
}目前我只知道用户在哪里,没有它的当前标题。

我想要的是显示当前标题,如下所示:,

我找到了在文档中添加标题指示符的选项(https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol),还有一个用于react包装器的showUserHeading选项。我无法理解如何在react包装器中添加此选项?
下面是GeoLocation props文档:https://visgl.github.io/react-map-gl/docs/api-reference/geolocate-control
发布于 2021-09-21 21:27:14
我发现在2029.21年,react-map-gl还没有在他们的属性中包含showUserHeading。我通过使用这个工具https://www.npmjs.com/package/patch-package打补丁解决了这个问题
这是补丁
diff --git a/node_modules/react-map-gl/src/components/geolocate-control.d.ts b/node_modules/react-map-gl/src/components/geolocate-control.d.ts
index 7c5d2a4..949f38b 100644
--- a/node_modules/react-map-gl/src/components/geolocate-control.d.ts
+++ b/node_modules/react-map-gl/src/components/geolocate-control.d.ts
@@ -9,6 +9,7 @@ type GeolocateControlProps = MapControlProps & Partial<{
positionOptions: any,
fitBoundsOptions: any,
trackUserLocation: boolean,
+ showUserHeading?: boolean,
showUserLocation: boolean,
showAccuracyCircle: boolean,
onViewStateChange?: Function,https://stackoverflow.com/questions/69267701
复制相似问题