将openstreetmap的坐标设置为状态。

Question

我试图从一个特定的城市获取坐标，并将其设置为一个状态，作为地图提供者使用。

我很确定这是一件很愚蠢的事情，但我花在这上面的时间比我想承认的要多。

它有点工作，我可以设置状态，我可以控制台.记录坐标，然而，它首先是空，空。然后是lat，null，最后是lat long。像这样。

null null
101.6942371 null
101.6942371 3.1516964

我想把最后两个坐标设置为状态，我想它应该可以正常工作，但是，我想把这个状态作为lat和long，像这样。

  latitude: lat,
 longitude: long,

当我这样做的时候，我得到了 "错误，必须提供 longitude "Error: must be supplied". 我相信这是因为它试图将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.comhelptutorialsuse-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>}