从 Google 地理坐标更改为 Mapbox 在 Angular 中放置 API 2

Question

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

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

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

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;
    }
}

我已将其更改为使用 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; });

我现在已经更新以匹配 Mapbox API，如下所示：

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

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

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

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

Answer 1

看起来一切都很好。我认为如果 observable 没有发出值，那可能是因为 observable 中发生了错误，或者它只是没有发出有效值。因为 Mapbox 和 Google 有不同的响应格式，只需检查您是否在所有地方都使用了对 place_name 和 features 的正确引用，而不是使用 formatted_address 或 results

从 Google 地理坐标更改为 Mapbox 在 Angular 中放置 API 2

Changing from Google Geocoiding to Mapbox Places API in Angular 2

angular

typescript

refresh

google-places-api

mapbox