Angular 2 HTTP GET mit TypeScript google geocode service

Ich bin neu in angular2 und versuche, die Koordinaten (Breite, Länge) mit dem Standort zu finden.Angular 2 HTTP GET mit TypeScript google geocode service

hier ist mein Code,

GeoService.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
@Injectable() 
export class GeoService { 
    constructor(private http: Http) { } 
    getLocation(term: string) { 
     return this.http.get('http://maps.google.com/maps/api/geocode/json?address=' + term + 'CA&sensor=false').map 
     ((response) => response.json()); 
    } 
// tslint:disable-next-line:eofline 
}

app.component.html

<!DOCTYPE HTML> 
<h1> {{title}} </h1> 
<input type="text" [(ngModel)]="location" /> 
<button (click)="findLocation($event)">Find location</button> 
<sebm-google-map 
     [latitude]="lat" 
     [longitude]="lng" 
     [zoom]="zoom" 
     [disableDefaultUI]="false" 
     [zoomControl]="false" 
     (mapClick)="mapClicked($event)"> 
    <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index" 
      (markerClick)="clickedMarker(m.label, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [label]="m.label" 
      [markerDraggable]="m.draggable" 
      (dragEnd)="markerDragEnd(m, $event)"> 
     <sebm-google-map-info-window> 
      <strong>InfoWindow content</strong> 
     </sebm-google-map-info-window> 
     </sebm-google-map-marker> 
     <sebm-google-map-circle [latitude]="lat + 0.3" [longitude]="lng" 
      [radius]="5000" 
      [fillColor]="'red'" 
      [circleDraggable]="true" 
      [editable]="true"> 
     </sebm-google-map-circle> 
</sebm-google-map>

app.component.ts

import { Component } from '@angular/core'; 
import { GeoService } from './GeoService'; 

@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl: `./app.component.html`, 
    styleUrls: ['/app.componenet.css'], 
    providers :[GeoService] 
}) 
export class AppComponent { 
    title = 'Angular2 google map test'; 
    lat: number = 51.673858; 
    lng: number = 7.815982; 
    zoom: number = 8; 

    markers: marker[] = [ 
    { 
     lat: 51.673858, 
     lng: 7.815982, 
     label: 'A', 
     draggable: true 
    }, 
    { 
     lat: 51.373858, 
     lng: 7.215982, 
     label: 'B', 
     draggable: false 
    }, 
    { 
     lat: 51.723858, 
     lng: 7.895982, 
     label: 'C', 
     draggable: true 
    } 
    ]; 

    location: string; 

    findLocation(): void { 
    this.result= this.geoService.getLocation(this.location); 
    } 
    constructor(private geoService: GeoService) { 
    } 
    clickedMarker(label: string, index: number) { 
    } 
    mapClicked($event: MouseEvent) { 
    } 
    markerDragEnd(m: marker, $event: MouseEvent) { 
    console.log('dragEnd', m, $event); 
    } 

} 
// tslint:disable-next-line:class-name 
interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
}

Wie bekomme ich das Ergebnis in app.component.ts?

findLocation(): void { 
    this.result= this.geoService.getLocation(this.location); 
    }

Quelle

2017-01-25 Sajeetharan

In welcher geokodierten URL verwenden Sie den CA-Parameter? Ich kann es nicht in den Dokumenten finden. Außerdem habe ich festgestellt, dass der Sensorparameter nicht mehr benötigt wird. – salsadeanguila

Hoffentlich nicht noch auf diese stecken. Auch wenn dies Ihnen möglicherweise nicht mehr hilft, wird es hoffentlich anderen helfen. Hier ist, was ich gerade getan habe. Ändern Sie zuerst die Funktion getLocation. Dies ist für die aktuelle Version von Angular2.

getLocation(term: string):Promise<any> { 
    return this.http.get('http://maps.google.com/maps/api/geocode/json?address=' + term + 'CA&sensor=false') 
     .toPromise() 
     .then((response) => Promise.resolve(response.json())); 
     .catch((error) => Promise.resolve(error.json())); 
}

Und dann in app.component.ts, ändern Sie dies zu.

findLocation(): void { 
    this.geoService.getLocation(this.location) 
     .then((response) => this.result = response.results[0]) 
     .catch((error) => console.error(error)); 
}

Ich habe etwas Fehlerkontrolle hinzugefügt, weil das immer gut zu haben ist. Und ich hatte eine Ergebnis-Array-Rückgabe innerhalb der Antwort, um mit dem Benutzer zu klären, welche Adresse gewünscht wird, wenn mehr als eine zurückgegeben wird.

Quelle

2017-06-29 18:02:31 user3700940

Warum funktioniert die beobachtbare Route nicht? –

@BrianAllanWest Ich habe das nie mit einem Observablen gebaut. In meiner Implementierung habe ich einige Berechnungen mit einem Parameter von findLocation durchgeführt, also habe ich ein Promise verwendet, um die Ergebnisse zurückzubekommen. Ein Observable sollte jedoch funktionieren, entfernen Sie einfach alle Versprechen Code und ändern Sie die Promise.resolve Zeilen. – user3700940

Angular 2 HTTP GET mit TypeScript google geocode service

Antwort

Verwandte Themen