Question

环境：Windows 10 Pro，Visual Code，Chrome 76.0.3809.100，MapBox，React

基本问题：ReactJS应用程序。我正在使用Fetch()通过MapBox API调用获取经度和纬度坐标，并在ComponentDidMount（）方法中设置状态。但是，渲染地图时，坐标不可用，并导致错误：“错误：viewport-mercator-project：断言失败。”

基本上，我无法获取地图上标记的坐标，因为它们直到显示地图后的某个时间才会解析。如何获取可用于地图的坐标？

我对Javascript ReactJS编程还很陌生，但是从总体上讲，我可以使用Fetch()（或任何其他类似的方法来从API获取数据）并与Promise一起工作。我需要执行以下操作：

使用ComponentDidMount()方法进行呼叫。
解决“承诺”并在ComponentDidMount()中设置状态。

如果我将硬设置的坐标放置在标记中，则问题消失。

如果将Maker置于有条件的条件下（如我将在后面的代码中所做的那样），则问题将消失，但不会显示Maker。因此，由于标记的条件，该错误将不会显示。

这里是完整的代码，如果您愿意的话，可以自己查看此问题：

import React, { Component } from "react";
import ReactMapGL, { Marker } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

class App extends Component {
  state = {
    myLocation: { name: "", address: "", longitude: 0.0, latitude: 0.0 },
    viewport: {
      height: "100vh",
      width: "100vw",
      longitude: -77.1546602,
      latitude: 38.8935128,
      zoom: 8
    }
  };

  async componentDidMount() {
    const theWhiteHouse = {
      name: "The White House",
      address: "1600 Pennsylvania Ave NW, Washington DC 20500"
    };
    const center = this.getMapBoxInfoUsingFetch();
    center.then(res => {
      theWhiteHouse.longitude = res[0];
      theWhiteHouse.latitude = res[1];
    });
    this.setState({ myLocation: theWhiteHouse });
  }

  // Returns a Promise
  // REACT_APP_API_URL=https://api.mapbox.com/geocoding/v5/mapbox.places
  // GET YOUR OWN MAPBOX TOKEN
  getMapBoxInfoUsingFetch = async () => {
    const address = "1600 Pennsylvania Ave NW, Washington DC 20500";
    const full_url = `${process.env.REACT_APP_API_URL}/${address} United States.json?access_token=${process.env.REACT_APP_MAPBOX_API_TOKEN}`;
    const f = await fetch(full_url);
    const j = await f.json();
    const center = j.features[0].center;
    return center;
  };

  render() {
    console.log("myLocation is", this.state.myLocation);
    return (
      <React.Fragment>
        <div>
          <ReactMapGL
            {...this.state.viewport}
            mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API_TOKEN}
            onViewportChange={viewport => {
              this.setState({ viewport });
            }}
          >
            {this.state.myLocation.longitude ? (
              <Marker
                longitude={this.state.myLocation.longitude}
                latitude={this.state.myLocation.latitude}
              >
                (WH)
              </Marker>
            ) : null}
          </ReactMapGL>
        </div>
      </React.Fragment>
    );
  }
}

export default App;

运行应用程序（从npm启动）后，我在控制台中看到以下内容：

myLocation is {name: "", address: "", longitude: 0, latitude: 0}

...然后片刻之后。...

myLocation is {name: "The White House", address: "1600 Pennsylvania Ave NW, Washington DC 20500"}

如果我扩展填充的状态值： myLocation是

{name: "The White House", address: "1600 Pennsylvania Ave NW, Washington DC 20500"}
address: "1600 Pennsylvania Ave NW, Washington DC 20500"
latitude: 38.897675
longitude: -77.036547
name: "The White House"
__proto__: Object

在此文本中您看不到的是log元素右侧的蓝色小东西，如该图所示，当您单击它时，“评估了下面的值刚刚”

对我来说，这表明在通过React放置元素期间并没有真正解析出坐标值，但是为方便起见，对它们进行了评估。

我一直在努力创建一种通过MapBox API获取坐标并设置某种对象以便可以映射标记的机制，并且在每种情况下，我都对Promise的解决感到不信任直到显示地图之后。

我已经完成了有关Javascript Promises以及async和await的使用的研究，所以我认为我至少具有基本的理解。我看到的所有内容都显示了将状态设置为ComponentDidMount()的过程，而我这样做的时候，坐标仍然没有完全解析。

我显然缺少一些关键的东西，也许很简单，但是到目前为止我一直无法弄清楚，所以我想问一下。

我该如何工作以便在渲染地图时可以使用坐标？

React-Map-GL坐标为空-错误：viewport-mercator-project：断言失败

0 个答案: