NativeScript - 地理位置:使用getCurrentLocation promise函数的正确方法

时间:2017-11-11 12:04:35

标签: javascript android promise geolocation nativescript

我正在编写一个使用nativescript-geolocation API的简单应用。 函数getCurrentLocation基本上工作正常,但当我移动到另一个名为maps-module.js的文件并从文件detail.js的主线程调用它时,它返回的对象位置为NULL。 在打印到控制对象后,我意识到变量returned_location是在函数完成查找位置之前返回的。 我认为它的多线程问题,但我真的不知道如何解决它。 这是我的档案。

detail.js

var Frame = require("ui/frame");
var Observable = require("data/observable");

var MapsModel = require("../../view-models/maps-model");


var defaultMapInfo = new MapsModel({
    latitude: "10.7743332",
    longitude: "106.6345204",
    zoom: "0",
    bearing: "0",
    tilt: "0",
    padding: "0"
});

var page;
var mapView;

exports.pageLoaded = function(args) {
    page = args.object;
    var data = page.navigationContext;
    page.bindingContext = defaultMapInfo;
}

exports.onBackTap = function () {
    console.log("Back to home");
    var topmost = Frame.topmost();
    topmost.goBack();
}

function onMapReady(args) {
    mapView = args.object;
    mapView.settings.zoomGesturesEnabled = true;
}

function onMarkerSelect(args) {
    console.log("Clicked on " + args.marker.title);
}

function onCameraChanged(args) {
    console.log("Camera changed: " + JSON.stringify(args.camera)); 
}

function getCurPos(args) {
    var returned_location = defaultMapInfo.getCurrentPosition(); // variable is returned before function finished
    console.dir(returned_location);
}


exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.getCurPos = getCurPos;

地图-module.js

var Observable = require("data/observable");

var Geolocation = require("nativescript-geolocation");
var Gmap = require("nativescript-google-maps-sdk");

function Map(info) {
    info = info || {};
    var _currentPosition;

    var viewModel = new Observable.fromObject({
        latitude: info.latitude || "",
        longitude: info.longitude || "",
        zoom: info.zoom || "",
        bearing: info.bearing || "",
        tilt: info.bearing || "",
        padding: info.padding || "",
    });

    viewModel.getCurrentPosition = function() {
        if (!Geolocation.isEnabled()) {
            Geolocation.enableLocationRequest();
        }

        if (Geolocation.isEnabled()) {
            var location = Geolocation.getCurrentLocation({
                desiredAccuracy: 3, 
                updateDistance: 10, 
                maximumAge: 20000, 
                timeout: 20000
            })
            .then(function(loc) {
                if (loc) {
                    console.log("Current location is: " + loc["latitude"] + ", " + loc["longitude"]);
                    return Gmap.Position.positionFromLatLng(loc["latitude"], loc["longitude"]);
                }
            }, function(e){
                console.log("Error: " + e.message);
            });

            if (location)
                console.dir(location);
        }
    }

    return viewModel;
}

module.exports = Map;

2 个答案:

答案 0 :(得分:1)

如果Shiva Prasad的脚注......

  

“geolocation.enableLocationRequest()也是一种异步方法”

...是正确的,那么geolocation.enableLocationRequest()返回的Promise必须妥善处理,代码会发生相当大的变化。

试试这个:

viewModel.getCurrentPosition = function(options) {
    var settings = Object.assign({
        'desiredAccuracy': 3,
        'updateDistance': 10,
        'maximumAge': 20000,
        'timeout': 20000
    }, options || {});

    var p = Promise.resolve() // Start promise chain with a resolved native Promise.
    .then(function() {
        if (!Geolocation.isEnabled()) {
            return Geolocation.enableLocationRequest(); // return a Promise
        } else {
            // No need to return anything here.
            // `undefined` will suffice at next step in the chain.
        }
    })
    .then(function() {
        if (Geolocation.isEnabled()) {
            return Geolocation.getCurrentLocation(settings); // return a Promise
        } else { // <<< necessary to handle case where Geolocation didn't enable.
            throw new Error('Geolocation could not be enabled');
        }
    })
    .then(function(loc) {
        if (loc) {
            console.log("Current location is: " + loc.latitude + ", " + loc.longitude);
            return Gmap.Position.positionFromLatLng(loc.latitude, loc.longitude);
        } else { // <<< necessary to handle case where loc was not derived.
            throw new Error('Geolocation enabled, but failed to derive current location');
        }
    })
    .catch(function(e) {
        console.error(e);
        throw e; // Rethrow the error otherwise it is considered caught and the promise chain will continue down its success path.
        // Alternatively, return a manually-coded default `loc` object.
    });

    // Now race `p` against a timeout in case enableLocationRequest() hangs.
    return Promise.race(p, new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject(new Error('viewModel.getCurrentPosition() timed out'));
        }, settings.timeout);
    }));
}
return viewModel;

注意:

  1. 使用已解析的本机Promise启动链提供与new Promise(...)中的包装大致相同的效果,但主要是因为链中的意外抛出可以保证在链的错误路径中传递Error对象需要try/catch/reject()。此外,在标有“返回承诺”的两行中,我们无需关心是否返回Promise或值;要么被本土的Promise链所吸收。

  2. 包含两个else条款,以应对不会自动抛出的失败案例。

  3. Promise.race()不是必需的,但可以防范报告的问题here。内置的“超时”机制可能就足够了。这种额外的超时机制是一种“腰带和括号”措施。

  4. 包含一种机制,通过传递viewModel.getCurrentPosition对象来覆盖options中的硬编码默认值。要使用默认值运行,只需致电viewModel.getCurrentPosition()即可。引入此功能主要是为了允许settings.timeout重用Promise.race()

答案 1 :(得分:0)

由于获取location是一个异步过程,你的viewModel.getCurrentPosition应该返回一个promise,看起来像这样,

viewModel.getCurrentPosition() {
    return new Promise((resolve, reject) => {
        geolocation
            .getCurrentLocation({
                desiredAccuracy: enums.Accuracy.high,
                updateDistance: 0.1,
                maximumAge: 5000,
                timeout: 20000
            })
            .then(r => {
                resolve(r);
            })
            .catch(e => {
                reject(e);
            });
    });
}

然后当你使用它时,它看起来像这样

defaultMapInfo.getCurrentPosition()
    .then(latlng => {
       // do something with latlng {latitude: 12.34, longitude: 56.78}
    }.catch(error => {
       // couldn't get location
    }
}

希望有帮助:)

更新:BTW,geolocation.enableLocationRequest()也是一种异步方法。