从Google Geocoding更改为Mapbox将API置于Angular 2中

我正在开发一个web应用程序，当点击地图时，它会对一个点进行地理编码

应用程序是用Angular 2编写的。不幸的是，我对Angular不熟悉

目前，应用程序使用谷歌进行地理编码，返回结果时文本框会自动更新。当前代码如下所示：

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';

@Injectable()
export class GeocoderService {

    private geocodeUrl: string = 'https://maps.googleapis.com/maps/api/geocode/json?key=REDACTED';

    constructor(private http: Http) {
    }

    public addressFromPoint(point: Point) {
        let url: string = this.geocodeUrl + '&latlng=' + encodeURIComponent(point.latLong());
        console.log(url);
        return this.http.get(url);
    }

    public addressToPoint(address: string) {
        let url: string = this.geocodeUrl + '&address=' + encodeURIComponent(address);
        console.log(url);
        return this.http.get(url);
    }

    public getAddress(point: Point) {
        let address: string;
        this.addressFromPoint(point).subscribe(
            (response) => {
                address = response.json();
            }
        )
        return address;
    }

    public getPoint(address: string):Point {
        let point: Point;
        this.addressToPoint(address).subscribe(
            (response) => {
                point = new Point([]);
            },
            (error) => {

            });
        return point;
    }
}

this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().features[0].place_name; });

我已将其更改为使用Mapbox Places API，如下所示：

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';

@Injectable()
export class GeocoderService {

    private geocodeUrl: string = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';

    private ACCESS_TOKEN: string = 'access_token=REDACTED';

    constructor(private http: Http) {
    }

    public addressFromPoint(point: Point) {
        let url: string = this.geocodeUrl + point.longLat() + '.json?' + this.ACCESS_TOKEN;
        console.log(url);
        return this.http.get(url);
    }

    public addressToPoint(address: string) {
        let url: string = this.geocodeUrl + address + '.json?' + this.ACCESS_TOKEN;
        console.log(url);
        return this.http.get(url);
    }

    public getAddress(point: Point) {
        let address: string;
        this.addressFromPoint(point).subscribe(
            (response) => {
                address = response.json();
            }
        )
        return address;
    }

    public getPoint(address: string):Point {
        let point: Point;
        this.addressToPoint(address).subscribe(
            (response) => {
                point = new Point([]);
            },
            (error) => {

            });
        return point;
    }
}

this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().formatted_address; });

地理编码器服务的使用方式如下：

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';

@Injectable()
export class GeocoderService {

    private geocodeUrl: string = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';

    private ACCESS_TOKEN: string = 'access_token=REDACTED';

    constructor(private http: Http) {
    }

    public addressFromPoint(point: Point) {
        let url: string = this.geocodeUrl + point.longLat() + '.json?' + this.ACCESS_TOKEN;
        console.log(url);
        return this.http.get(url);
    }

    public addressToPoint(address: string) {
        let url: string = this.geocodeUrl + address + '.json?' + this.ACCESS_TOKEN;
        console.log(url);
        return this.http.get(url);
    }

    public getAddress(point: Point) {
        let address: string;
        this.addressFromPoint(point).subscribe(
            (response) => {
                address = response.json();
            }
        )
        return address;
    }

    public getPoint(address: string):Point {
        let point: Point;
        this.addressToPoint(address).subscribe(
            (response) => {
                point = new Point([]);
            },
            (error) => {

            });
        return point;
    }
}

this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().formatted_address; });

现在，我已将其更新为与Mapbox API相匹配，如下所示：

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';

@Injectable()
export class GeocoderService {

    private geocodeUrl: string = 'https://maps.googleapis.com/maps/api/geocode/json?key=REDACTED';

    constructor(private http: Http) {
    }

    public addressFromPoint(point: Point) {
        let url: string = this.geocodeUrl + '&latlng=' + encodeURIComponent(point.latLong());
        console.log(url);
        return this.http.get(url);
    }

    public addressToPoint(address: string) {
        let url: string = this.geocodeUrl + '&address=' + encodeURIComponent(address);
        console.log(url);
        return this.http.get(url);
    }

    public getAddress(point: Point) {
        let address: string;
        this.addressFromPoint(point).subscribe(
            (response) => {
                address = response.json();
            }
        )
        return address;
    }

    public getPoint(address: string):Point {
        let point: Point;
        this.addressToPoint(address).subscribe(
            (response) => {
                point = new Point([]);
            },
            (error) => {

            });
        return point;
    }
}

this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().features[0].place_name; });

当我现在运行应用程序时，我可以在F12控制台中看到正确的地址正在进行地理编码，但文本框不再自动更新

我原以为可能是打字的问题，但在我对字符串进行了转换后，这仍然不起作用。我还认为可能是字符串的长度，因为mapbox版本较长（可能文本框有限制），但查找该字符串的子字符串似乎也不会更新文本框。我还尝试将其更新为字符串文字，但即使这样也不起作用。我的猜测是，问题在于它是如何使用可观测的，但我不知道如何解决这个问题

---

我的文本框停止更新的其他原因是什么？如果这还不够，我可以编辑以提供更多信息或代码

这一切看起来都很好。我认为，如果可观察对象没有发出一个值，可能是因为可观察对象中发生了错误，或者只是没有发出一个有效的值。因为Mapbox和Google有不同的响应格式，所以只需检查您是否在所有地方使用了对

地名

和

功能的正确引用，而不是使用
格式化地址
或
结果