使地理位置坐标可用于其他功能

Posted 2023-02-23

【中文标题】使地理位置坐标可用于其他功能

【英文标题】：Making geolocation coordinates available to other functions

【发布时间】：2016-02-09 04:57:30

【问题描述】：

我正在开发一个基本的 javascript 天气应用程序。我想从浏览器中提取地理位置并使其可供我的其他功能使用。

function Weather( options ) 

    this.apiKey = options.key;
    this.endpoint = options.endpoint;
    this.coordinates = ;


Weather.prototype.GetLocation = function( callback ) 
    if (navigator.geolocation)
    
        navigator.geolocation.getCurrentPosition( function(position) 
            this.coordinates.latitude = position.coords.latitude;
            this.coordinates.longitude = position.coords.longitude;
        );
    
;

Weather.prototype.GetCurrentConditions = function() 

    this.GetLocation();

    var url = this.endpoint + "weather?lat=" + this.coordinates.latitude + "&lon=" + this.coordinates.longitude;

    return this.getJSONP( url );
;

Weather.prototype.GetExtendedForecast = function() 

    this.GetLocation();

    var url = this.endpoint + "forecast/daily?lat=" + this.coordinates.latitude + "&lon=" + this.coordinates.longitude + "&cnt=7";

    return this.getJSONP( url );
;

但是，我的纬度和经度一直未定义。我在某处读到，如果您想使用必须将它们保存在 getCurrentPosition 的回调函数中的坐标，这就是我所做的，但除了未定义之外，我仍然无法获得任何东西。有没有办法让我的其他函数可以访问这些值？

【参考方案1】：

首先，navigator.geolocation.getCurrentPosition 回调是异步工作的，所以你在调用this.GetLocation() 后不会马上得到结果。此外，用户可以禁止与应用程序共享他的位置。

其次，this 有误。您需要在此处将上下文传递给回调：

navigator.geolocation.getCurrentPosition( function(position) 
    // "this" doesn't equal to instance of your Weather class
    this.coordinates.latitude = position.coords.latitude;
    this.coordinates.longitude = position.coords.longitude;
);

例如，您可以使用.bind(this) 将预期的上下文传递给回调：

navigator.geolocation.getCurrentPosition( function(position) 
    this.coordinates.latitude = position.coords.latitude;
    this.coordinates.longitude = position.coords.longitude;
.bind(this));

我的解决方案

异步代码最好使用Promise。你可以使用任何 Promise 的实现，我更喜欢JQuery.deferred

我的代码是：

var getCurrentPosition = function() 
  var deferred = $.Deferred();

  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
   else 
    deferred.reject(
      error: 'browser doesn\'t support geolocation'
    );
  

  return deferred.promise();
;

如何使用

var userPositionPromise = getCurrentPosition();

userPositionPromise
  .then(function(data) 
    // do whatever you want with geolocation data
  )
  .fail(function(error) 
    // show error for user
  );

userPositionPromise可以随意使用，它将作为用户位置数据的容器，无需再次调用getUserPosition。要访问数据，您需要为您的userPositionPromise 变量调用.then(callback)。

【讨论】：

如果没有 jQuery，你将如何进行绑定？我正在努力在我的项目中更好地使用纯 JavaScript。

你可以在没有 jQuery 的情况下使用原生 Promise 编写它，它看起来一样，但它是 doesn't work on IE（所以，你需要使用 polyfill）。或者你可以不使用 Promise 写这个，但是你需要使用大量的回调和标志来检查数据。

在你的 jsfiddle 我看到你有一个拒绝但你在哪里解决坐标？

我调用 navigator.geolocation.getCurrentPosition 并传递两个回调：resolve 和 reject。当navigator.geolocation.getCurrentPosition 成功执行时，它会调用resolve 回调，用数据解决我的承诺。所以，我只是将 resolve 从 promise 传递给 getCurrentPosition 作为 onSuccess 回调。你可以这样写：jsfiddle.net/1r1bdmrb/1 但第一个版本看起来更干净。

好的，这就是我目前所拥有的。 jsfiddle.net/08yrdact 但是，我收到一条错误消息，指出失败不是函数。你能告诉我我做错了什么吗？