角型2 HTTP GET with TypeScript googleジオコードサービス

私はangular2を初めて使っていて、場所を使って座標（緯度、経度）を探しています。ここ角型2 HTTP GET with TypeScript googleジオコードサービス

は、私のコードです

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

app.component.tsで結果を取得するにはどうすればよいですか？

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

出典

2017-01-25 Sajeetharan

ジオコーディングされたURLには、どのようにCAパラメータを使用しますか？私はドキュメントでそれを見つけることができません。また、センサーのパラメータが不要になったことがわかりました。 – salsadeanguila

うまくいけば、あなたはまだこれに固執していません。これはもはやあなたを助けないかもしれないが、うまくいけばそれは他の誰かを助けるだろう。ここに私が今やったことがあります。まず、getLocation関数をthisに変更します。これは現在の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())); 
}

次に、app.component.tsに変更してください。

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

エラー制御を追加しましたが、これは常に適切であるためです。応答配列内に結果配列が返されたので、複数の返り値が返ってきた場合にどのアドレスに必要なのかをユーザに明確にします。

出典

2017-06-29 18:02:31 user3700940

なぜ観測可能なルートは機能しませんか？ –

@BrianAllanWest私はこれを観測可能なもので構築したことはありません。私の実装では、findLocationのパラメータを使って計算を行ったので、結果を返すためにPromiseを使用しました。観察可能なものはうまくいくはずですが、約束関連のコードをすべて削除し、Promise.resolve行を変更してください。 – user3700940

角型2 HTTP GET with TypeScript googleジオコードサービス

答えて

関連する問題