如何将地理定位纬度从componentDidMount传递到另一个函数?

时间:2018-11-03 18:06:52

标签: javascript reactjs geolocation foursquare

我正在使用Google Maps API和Foursquare API构建一个React应用。我目前有Foursqaure的搜索中心,它被硬编码为ll: "36.04,-86.74",,然后在componentDidMount的更深处有console.log(纬度:$ {crd.latitude}长度:$ {crd.longitude} );正在从用户位置获取延迟。

如何将用户位置传递给ll,而不是硬编码?

下面的代码是文件的这一部分,请让我知道我是否应该粘贴/发布其他内容/或回购链接(我认为这足够了)。

// Search query to Foursquare API
  searchVenues = (query, limit) => {
    SquareAPI.search({
      ll: "36.04,-86.74", // Needs to be lat lng from user geo
      // ll: {lat: crd.latitude, lng: crd.longitude}, // doesn't work
      query: query,
      limit: limit
    }).then(res => {
      const { venues } = res.response;
      const center = { lat: 36.04, lng: -86.74 }; // this also needs to be lat lng from user geo (?)
      const markers = venues.map(venue => {
        return {
          lat: venue.location.lat,
          lng: venue.location.lng,
          isOpen: false,
          isVisible: true,
          id: venue.id
        };
      })
      this.setState({ venues, center, markers });
      // Error for foursquare API call failure
    }).catch(error => {
      // pass error message(s) to handelError()
      this.handleError(error)
    })
  }
  // After mount of App component
  componentDidMount() {
    // Pass these into Foursquare search query above
    this.searchVenues("juice+coffee", "25");

    // Geolocation snippet based on MDN's example
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };

    // Success function for current position
    const success = (pos) => {
      const crd = pos.coords;
      console.log('Your current position is:');
      console.log(`Lat: ${crd.latitude} Lng: ${crd.longitude}`);

      this.setState({ center: { lat: crd.latitude, lng: crd.longitude } })
      this.setState({ defualtCenter: { lat: crd.latitude, lng: crd.longitude } })
    }

    function error(err) {
      console.warn(`ERROR(${err.code}): ${err.message}`);
    }

    navigator.geolocation.getCurrentPosition(success, error, options);
  }

0 个答案:

没有答案