将 openstreetmap 中的坐标设置为状态

Question

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

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

它有点工作，我可以设置状态，我可以 console.log 坐标，但是，它首先是 null，null。然后是 lat、null，最后是 lat long。像这样。

null null
101.6942371 null
101.6942371 3.1516964

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

  latitude: lat,
 longitude: long,

当我这样做时，我得到 "Error: longitude 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

如果您不想修复 "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>}

Answer 2

解决了。

放弃并混合使用 mapboxgl 和 openstreetmapprovider。

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

太蠢了，我没有早点这么做。

将 openstreetmap 中的坐标设置为状态

Setting coordinates from openstreetmap as state

javascript

api

asynchronous

openstreetmap

reactjs