时间戳

首页 > 解决方案 > 将 openstreetmap 中的坐标设置为状态

javascript - 将 openstreetmap 中的坐标设置为状态

问题描述

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

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

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

null null
101.6942371 null
101.6942371 3.1516964

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

  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;

我只会将组件用作 .

谢谢

标签： javascriptreactjsapiasynchronousopenstreetmap

解决方案

解决了。

放弃并混合使用 mapboxgl 和 openstreetmapprovider。

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

太傻了，我之前没有这样做。

推荐阅读