Переход с Google Geocoiding на API Mapbox Places в Angular 2 - PullRequest
1 голос
/ 17 июня 2019

Я работаю над веб-приложением, которое геокодирует точку при нажатии на карту.

Приложение написано на 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;
    }
}

Я изменил это для использования API Mapbox Places следующим образом:

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

, который я сейчас обновил, чтобы он соответствовал API Mapbox следующим образом:

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

Когда я сейчас запускаю приложение, я вижу в консоли F12, что правильный адрес геокодируется,но текстовые поля больше не обновляются автоматически.

Я думал, что это могут быть наборы, но это все равно не работает после того, как я приведу к строкам.Я также подумал, что это может быть длина строки, так как версия mapbox длиннее (возможно, текстовое поле имеет ограничение), но поиск подстроки этого также, похоже, не обновляет текстовое поле.Я также попытался обновить его до строкового литерала, но даже это не работает.Я предполагаю, что проблема заключается в том, как он использует наблюдаемые, но я не знаю, как это решить.

Каковы другие причины, по которым мое текстовое поле перестало обновляться?Я могу редактировать, чтобы предоставить больше информации или кода, если этого недостаточно для продолжения.

1 Ответ

1 голос
/ 18 июня 2019

Это все выглядит хорошо.Я думаю, что если наблюдаемая не излучает значение, это, вероятно, связано с тем, что в наблюдаемой произошла ошибка, иначе она просто не излучает допустимое значение.Поскольку у Mapbox и Google разные форматы ответов, просто убедитесь, что вы используете правильные ссылки на place_name и features везде и не используете formatted_address или results

...