如何将地理位置 lat lng 从函数传递到 React 中另一个函数的“ll”属性？

Posted 2023-02-23

【中文标题】如何将地理位置 lat lng 从函数传递到 React 中另一个函数的“ll”属性？

【英文标题】：How to pass a geolocation lat lng from a function to another's `ll` property in React?

【发布时间】：2018-11-05 17:56:40

【问题描述】：

我有一个 Geolocation.js，它获取地理位置并将其记录到控制台。这被导入到 index.js 文件中，需要使用记录的 lat 和 lng 值，以替换 ll 中的当前硬编码值：

import * as fsAPI from "../data/API_credentials";
import userGeo from "../component/Geolocation"

class Helper 
        static baseURL() 
            return "https://api.foursquare.com/v2";
        
        // Client ID, client secret, and version stored in credentials file
        static auth()
            const keys = 
                client_id: `$fsAPI.client_id`,
                client_secret: `$fsAPI.client_secret`,
                v: `$fsAPI.client_version`,
                // Trying to get data from userGeo 
                // ll: `$userGeo.pos.lat` + "," + `$userGeo.pos.lng` //cannot read 'pos' of undefined.
                // Line below works
                ll: "36.04,-86.74"
            
            return Object.keys(keys).map(key => `$key=$keys[key]`)
            .join("&");


        

我作为userGeo 导入上述代码的代码如下，这是我的错误。我如何重构它以允许我在上面的ll 中获取lat lng？ userGeo.pos.lat 例如。

你可以在上面的 // ll: `$userGeo.pos.lat` + "," + `$userGeo.pos.lng` 中看到我失败的尝试，它抛出了 cannot read 'pos' of undefined.

// Geolocation of user to be used for search query Foursqaure call url

export const userGeo = navigator.geolocation.getCurrentPosition((position) => 
    var pos = 
        lat: position.coords.latitude,
        lng: position.coords.longitude
    ;

    console.log(pos) // works
    console.log("Lat: " + pos.lat) // works
);

非常感谢！ 本

【参考方案1】：

navigator.geolocation.getCurrentPosition 是异步的。它接受一个回调作为第一个参数，该参数将在检索到位置后调用。我的建议是在 auth 函数中承诺并使用它：

// Geolocation.js

export const getUserGeo = function (options) 
  return new Promise(function (resolve, reject) 
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  );


// Helper.js

import  getUserGeo  from "../component/Geolocation";

class Helper 
        static baseURL() 
            return "https://api.foursquare.com/v2";
        

        static auth()
            return getUserGeo()
               .then(position => 
                   const keys = 
                      client_id: `$fsAPI.client_id`,
                      client_secret: `$fsAPI.client_secret`,
                      v: `$fsAPI.client_version`,
                      ll: `$position.coords.latitude` + "," + `$position.coords. longitude` 
                  ;
                  return Object.keys(keys).map(key => `$key=$keys[key]`).join("&"); 
               );

请记住，auth() 方法不是异步的，它返回一个 Promise，它将使用 Object.keys(keys).map(key =>$key=$keys[key]).join("&") 的值解析

【讨论】：

我试过这个，API url的ll是[object%20Promise]，你有什么建议吗？ : 获取api.foursquare.com/v2/venues/… 400

另外，如果我在return Object.keys... 行之前console.log(position.coords.latitude)，它确实将lat 记录到控制台。

分享你使用auth()方法的代码。看来你不是在等待auth() 返回的承诺来解决

谢谢您-我无法以代码格式粘贴它-我使用了您最初共享的内容。 ` static auth() return getUserGeo() .then(position => const keys = client_id: $fsAPI.client_id, client_secret: $fsAPI.client_secret, v: $fsAPI.client_version, ll: $position.coords.latitude + "," + $position.coords.longitude ; console.log( position.coords.latitude) return Object.keys(keys).map(key => $key=$keys[key]).join("&"); ); `

我在询问Helper.auth() 被调用的那段代码