微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

默认情况下,如何加载设置为用户位置的经度和纬度的React-map-gl?

如何解决默认情况下,如何加载设置为用户位置的经度和纬度的React-map-gl?

我想使用认视口值设置为用户位置来渲染地图。目前,下面的代码用于普通渲染,单击时,在地图上有“定位我”按钮。 有没有办法让它认点击?

<ReactMapGL
    mapBoxApiAccesstoken={mapBoxApiKey}
    mapStyle="mapBox://styles/mapBox/streets-v11"
    {...viewport}
    {...mapStyle}
     onViewportChange={this.handle_view}
    >
    <GeolocateControl
      positionoptions={{ enableHighAccuracy: true }}
      trackUserLocation={true}
    />
</ReactMapGL>

解决方法

遵循以下答案:https://stackoverflow.com/a/59870917/14403123

 useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      setViewport({
        ...viewport,latitude: pos.coords.latitude,longitude: pos.coords.longitude
      });
    });
  },[]);

显示完整代码:https://codesandbox.io/s/intelligent-albattani-f596t?file=/src/App.js的codesandbox。但是,由于我缺少令牌,它不会显示地图。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。