打字稿getCurrent位置，並傳遞到後端得到的結果，並傳遞給物料表數據源

Question

我有我的角2項目，試圖獲得用戶的當前位置，因此在我的課，我有以下代碼：

export class CurrentLocation { 
    constructor(private http: Http) { } 
    private lat : any; 
    private lon : any; 
    private params = new URLSearchParams(); 
    private url = 'api/search/location'; 


    getPosition = (lat, lon) => { 
    navigator.geolocation.getCurrentPosition((position) => { 
     this.lat = position.coords.latitude; 
     this.lon = position.coords.longitude; 
    }); 
    } 
    getCurrentLocation(): Observable<any> { 
    this.getPosition(this.lat, this.lon); 
    console.log(this.lat+ "," + this.lon); 
    //console.log(this.lat + ":" + this.lon); 
    this.params.set('lat', this.lat); 
    this.params.set('lon', this.lon); 
    //console.log(this.params.toString()); 
    var result = this.http.get(this.url, { search: this.params }); 
    result.toPromise(); 
    return result; 
    } 
} 

但lat和lon返回undefined ..預期的行爲我想是我拿到的緯度和經度，我將它發送給我的後端解決諸如以下網址http://localhost:8080/api/search/location?lat=123&lon=123

但它似乎是lat和設定值失敗。

如何正確設置本課程的經緯度？ 8月3日

編輯：

根據下面libertyernie的回答，我可以成功地傳遞當前的緯度和經度到後端，但我不知道如何轉換爲可觀察的，因爲我嘗試使用表模塊中的角料，該模塊對數據源中它必須是可觀察......

下面是代碼我嘗試後，但仍然沒有工作...

import { Component, OnInit } from '@angular/core'; 
import { Http, Response, URLSearchParams } from '@angular/http'; 
import { DataSource } from '@angular/cdk'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
import { Restaurant } from '../restaurant/restaurant'; 
import { Category } from '../category/category'; 
import { RestaurantService } from '../restaurant/restaurant.service'; 


@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 
    displayedColumns = ['Id', 'Name', 'Category', 'Address', 'City']; 
    exampleDatabase: ExampleHttpDatabase | null; 
    dataSource: ExampleDataSource | null; 
    location: CurrentLocation | null; 
    lat: any; 
    lon: any; 
    result: Promise<any>; 

    constructor(http: Http) { 
    this.exampleDatabase = new ExampleHttpDatabase(http); 
    this.dataSource = new ExampleDataSource(this.exampleDatabase); 
    this.location = new CurrentLocation(http); 
    } 

    ngOnInit() { 
    this.result = this.location.getCurrentLocation(this.lat, this.lon); 
    this.result.then(function(result){ 
     console.log(result._body); 
    }) 
    console.log(this.lat, this.lon); 
    this.dataSource.connect(); 
    } 
} 

export class ExampleHttpDatabase { 
    private restaurantUrl = 'api/restaurant'; // URL to web API 
    getRestaurants(): Observable<Restaurant[]> { 
    var result = this.http.get(this.restaurantUrl) 
     .map(this.extractData); 
    result.toPromise(); 
    return result; 
    } 

    extractData(result: Response): Restaurant[] { 
    return result.json().map(restaurant => { 
     return { 
     id: restaurant.id, 
     name: restaurant.restaurant_name, 
     category: restaurant.category.map(c => c.categoryName).join(','), 
     address: restaurant.address.address, 
     city: restaurant.address.city.city_name 
     } 
    }); 
    } 
    constructor(private http: Http) { } 
} 

export class CurrentLocation { 
    constructor(private http: Http) { } 
    private lat: any; 
    private lon: any; 
    private params = new URLSearchParams(); 
    private url = 'api/search/location'; 


    getPosition =() => { 
    var latitude, longitude; 
    return new Promise((resolve, reject) => { 
     navigator.geolocation.getCurrentPosition((position) => { 
     resolve(position.coords); 
     }, (err) => { 
     reject(err); 
     }); 
    }) 
    } 
    async getCurrentLocation(lat, lon): Promise<any> { 
    let coords = await this.getPosition(); 
    lat = this.lat = coords['latitude']; 
    lon = this.lon = coords['longitude']; 
    this.params.set('lat', this.lat); 
    this.params.set('lon', this.lon); 
    var result = this.http.get(this.url, { search: this.params }); 
    return await result.toPromise(); 
    } 
} 

export class ExampleDataSource extends DataSource<Restaurant> { 
    constructor(private _exampleDatabase: ExampleHttpDatabase) { 
    super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Restaurant[]> { 
    return this._exampleDatabase.getRestaurants(); 
    } 

    disconnect() { } 
} 

很抱歉的代碼是有點混亂..但我不知道如何將結果傳遞到connect()功能，使物料表工程..

的完整代碼也Github上：https://github.com/zhengye1/Eatr/tree/dev

Answer 1

所有getCurrentLocation代碼（）將在給予navigator.geolocation.getCurrentPosition的回調之前運行有機會運行。您可以通過將其他的console.log聲明回調裏面看到：

navigator.geolocation.getCurrentPosition((position) => { 
    console.log("Got position", position.coords); 
    this.lat = position.coords.latitude; 
    this.lon = position.coords.longitude; 
}); 

有幾個原因，getCurrentPosition需要使用一個回調：

• 的地理位置查找可能需要瀏覽器查詢一些在線服務來找出你的位置
• 用戶可能會得到一個提示，詢問是否要與該網站分享他們的位置（這是大多數瀏覽器的默認行爲）

解決方案可能涉及到圍繞getCurrentPosition進行封裝，以便它返回一個承諾。我不知道2個觀測工作，所以我也不會怎麼角能夠幫助很多在該部分，但您可以爲getPosition返回一個承諾，像這樣：

getPosition =() => { 
    return new Promise((resolve, reject) => { 
    navigator.geolocation.getCurrentPosition((position) => { 
     resolve(position.coords); 
    }, (err) => { 
     reject(err); 
    }); 
    }); 

也許getCurrentLocation可能看起來像這樣（只是猜測）：

async getCurrentLocation(): PromiseLike<any> { 
    let coords = await this.getPosition(this.lat, this.lon); 
this.lat = coords['latitude']; 
this.lon = coords['longitude']; 
    this.params.set('lat', this.lat); 
    this.params.set('lon', this.lon); 
    var result = this.http.get(this.url, { search: this.params }); 
    return await result.toPromise(); 
} 

Answer 2

對於geolocation在移動瀏覽器，請確保您通過https傳遞尋呼，否則移動會忽略你的位置請求。