Mapbox GL 显示用户位置，精度差

Question

我正在开发一个 (PWA) 应用程序，用户可以在该应用程序中浏览地图并通过访问地图上商店的坐标来收集奖励。我目前正在为 Mapbox 使用 React wrapper，到目前为止效果很好，但用户位置的准确性不是很好，所以我想知道是否有人找到了在地图中显示用户确切位置的解决方法。

这就是我显示用户位置的方式。

    <div className="flex flex-auto h-screen overflow-hidden">
      <ReactMapGL
        {...viewport}
        height="100%"
        width="100%"
        onViewportChange={(nextViewport: any) => setViewport(nextViewport)}
        mapboxApiAccessToken="foo"
        onResize={clearPopupInformation}
        onWheel={clearPopupInformation}
        onClick={clearPopupInformation}
      >
        <GeolocateControl
          style={geolocateControlStyle}
          positionOptions={{ enableHighAccuracy: true }}
          trackUserLocation={true}
          auto
          showUserLocation={true}
        />
        {
            // ...other stuff
        }
      </ReactMapGL>
    </div>

我发现了以下内容：

Answer 1

显然，此问题仅发生在使用您的 IP 地址计算您的位置的网络浏览器上，当使用移动设备时，内置 GPS 用于计算您的确切位置。

您将需要 HTTPs 来询问移动用户的位置，有很多方法可以在 React 中使用 HTTPs，但我结合了这两种：

这里有有用的指南：https://github.com/FiloSottile/mkcert

Mapbox GL 显示用户位置，精度差

MapboxGL display user location, bad acuracy

geolocation

mapbox

reactjs