时间戳

首页 > 解决方案 > 已解决：react-leaflet 地图开启但不更新地理定位，whenCreated 不保存地图实例

reactjs - 已解决：react-leaflet 地图开启但不更新地理定位，whenCreated 不保存地图实例

问题描述

我没有意识到，但是使用 localhost 你不能从设备访问 GPS 数据——我现在正在使用 ngrok 生成一个可以发送跟踪请求的临时 URL。

此外，我的map变量现在已正确分配，可以使用如下代码所示：

useEffect(() => {
  const mapInterval = setInterval(() => {map.setView(currentLocation)}, 1000);
  return () => clearInterval(mapInterval);
}, [map, currentLocation]);

原始问题：

在 Firefox 上，我得到“想要访问您的位置”弹出窗口，并且权限（+“x 分钟前访问”）显示在浏览器的工具栏上，但地图不会更改以显示我的位置。如何使地图实际更新currentLocation？

另外，我用控制台进行了测试，显然map是未定义的；大概这意味着whenCreated={setMap}没有做任何事情。如何保存地图实例？

当前代码如下：

function PageMap(props) {
  const [ map, setMap ] = useState(null);
  const [currentLocation, setCurrentLocation] = useState([51.505, -0.09]);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      position => setCurrentLocation([position.coords.latitude, position.coords.longitude])
    )}, [map]);

  const markerIcon = L.icon({
    iconUrl: icon,
    iconRetinaUrl: icon,
    iconAnchor: [5, 55],
    popupAnchor: [10, -44],
    iconSize: [24, 41],
  });

  return (
    <div className="App">
      <div className="Map-background">
        <p>
          <button className="Button-container" onClick={(() => props.navigate('Home'))}>
            Home
          </button>
          {" "}
          <button className="Button-container" onClick={(() => props.navigate('Help'))}>
            Help
          </button>
        </p>
        <MapContainer className="Map-container" center={currentLocation} zoom={12} scrollWheelZoom={false} whenCreated={map => setMap(map)}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </MapContainer>
      </div>
    </div>
  );
};

标签： reactjsleafletreact-leaflet

解决方案

推荐阅读