将 openstreetmap 中的坐标设置为状态

Question

我正在尝试从特定城市获取坐标并将它们设置为一个州以用作地图提供​​者。

我很确定这很愚蠢，但我在这方面花费的时间比我想承认的要多。

它有点工作，我可以设置状态，我可以控制台记录坐标，但是，它是第一个 null，null。然后是 lat，null，最后是 lat long。像这样。

null null
101.6942371 null
101.6942371 3.1516964

我想将最后两个坐标设置为状态，我认为它应该可以正常工作，但是，我想将此状态用作 lat 和 long，如下所示：

  latitude: lat,
 longitude: long,

当我这样做时，我得到“错误：必须提供longitude”。我相信这是因为它试图将 null、null 设置为坐标。

代码如下：

import React, { useState, useEffect } from "react";
import MapGL, { GeolocateControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { OpenStreetMapProvider } from "leaflet-geosearch";

const Map = (props) => {
  const [long, setLong] = useState(null);
  const [lat, setLat] = useState(null);

  const styles = {
    width: "100%",
    height: "85%",
    position: "absolute",
  };

  useEffect(() => {
    const provider = new OpenStreetMapProvider();
    const fetchData = async () => {
      const results = await provider.search({ query: props.currentCity });
      setLong(results[0].x);
      setLat(results[0].y);

    };

    console.log(long, lat)
    fetchData();
  }, [long, lat]);

  const TOKEN =
    "xxx";

  const [viewport, setViewPort] = useState({
    width: "75%",
    height: 400,
    latitude: lat,
    longitude: long,
    zoom: 12,
  });

  const _onViewportChange = (viewport) => {
    setViewPort({ ...viewport, transitionDuration: 3000 });
  };
  return (
    <div style={{ margin: "0 auto" }}>
      <MapGL
        {...viewport}
        style={styles}
        mapboxApiAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        onViewportChange={_onViewportChange}
      ></MapGL>
    </div>
  );
};

export default Map;

我只是将组件用作 .

谢谢

Answer 1

解决了。

放弃并混合使用 mapboxgl 和 openstreetmapprovider。

https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/

相当愚蠢，我之前没有这样做。

Answer 2

如果您不希望修复“provider.search()”异步函数的前 2 个状态，这可能有效：

const fetchData = async () => {
  const results = await provider.search({ query: props.currentCity });
  if (results[0].x && results[0].y) {
    setLong(results[0].x);
    setLat(results[0].y);
    setViewPort({...viewport, 
                    latitude: results[0].y,
                    longitude: results[0].x,});
  }

};

您还可以这样做：

{viewport.latitude && viewport.longitude && <MapGL
    {...viewport}
    style={styles}
    mapboxApiAccessToken={TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    onViewportChange={_onViewportChange}
  ></MapGL>}