react-map-gl showUserHeading 不在 GeolocateControl 中答案

【问题标题】：react-map-gl showUserHeading not in GeolocateControlreact-map-gl showUserHeading 不在 GeolocateControl 中
【发布时间】：2021-09-21 10:57:08
【问题描述】：

我正在尝试在 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 选项。而且我不知道如何在反应包装器中添加这个选项？

这是 GeoLocation 道具文档： https://visgl.github.io/react-map-gl/docs/api-reference/geolocate-control

【问题讨论】：

标签： javascript reactjs typescript react-map-gl

【解决方案1】：

编辑：v6.1.18 已发布，GeolocateControl 现在具有 showUserHeading 属性。因此不再需要以下解决方案。

我发现截至 2021 年 9 月 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,

【讨论】：