无效的latlng对象 - React Leaflet

Question

  const [geoData, setGeoData] = useState([]);

  useEffect(() => {
    (async () => {
      const forGeoCode = await axios(
        "https://api.opencagedata.com/geocode/v1/json?q=United%20States&key={accessToken}&language=en&pretty=1"
      );
      setGeoData(forGeoCode.data.results[0].geometry);
    })();
  }, []);
  console.log(geoData.geometry);
  return (
    <div>
      <Map center={[52.6376, -1.135171]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={[geoData.lat, geoData.lng]} />
      </Map>

上面的代码给出了以下错误：错误：无效的 LatLng 对象：（未定义，未定义）

console.log 以经度和纬度打印，但我仍然遇到错误。

预期行为：将美国作为输入，return其经度和纬度并将其绘制在地图上

Answer 1

您将 geoData 初始化为空数组 []

你应该初始化：

const [geoData, setGeoData] = useState({lat:null,lng:null});

并且在组件的 return 中，您应该更改标记，仅在 geoData lat 和 lng 不同于 null 时绘制（这将是当您在响应 axios 中接收数据时）：

return (
    <div>
      <Map center={[52.6376, -1.135171]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {geoData.lat && geoData.lng && <Marker position={[geoData.lat, geoData.lng]} />}
      </Map>

并且在 useEffect 中，我建议您将 promise 与 then 和 catch 一起使用，以改善用户体验。只有在那时你才必须使用 setGeoData 并覆盖属性 lat 和 lng

useEffect(() => {
      axios.get(
        "https://api.opencagedata.com/geocode/v1/json?q=United%20States&key={accessToken}&language=en&pretty=1"
      ).then(response => {
       // I expect in response object geometry, change by the correct route
       setGeoData(response.data.geometry);
      }).catch(err => {
        console.log("error",err);
      });
  }, []);

-------- 下一个问题--------

如果要编辑地图样式。

正如您在 React-Leaflet 的文档中看到的那样：Link here

您可以添加 className 或 style 等道具。

结果会是

<Map style={{width:"400px",height:"600px"}}>
...

Answer 2

interface Coords {
  lat: number;
  lng: number;
}

const [geoData, setGeoData] = useState<Coords>({
    lat: 52.6376,
    lng: -1.135171,
  });

您需要初始化纬度和经度的值。希望这可以帮助。谢谢你。

无效的latlng对象 - React Leaflet

Invalid latlng object - React Leaflet

reactjs

openstreetmap

latitude-longitude

geocode

react-leaflet