角のGoogleマップの場所は、すべての場所を表示しないオートコンプリート

Question

Googleマップのプレースホルダを統合して、エンドユーザーがバニラのjavascriptで検索できるようにしたいと思っています。角度4のプロジェクトに変換すると、Googleマップのプレースホルダーが選択された場所のみを表示していることを除いて、すべてが正常に動作します。私もこのコードを使用しているので、これはplunkrと考えることができます。さらに私はAngular Google Mapモジュールを使用しています。このAPIの代替案または回避策をお勧めしますか？
TS FILE

import {AfterViewInit, Component, ElementRef, NgZone, OnInit, ViewChild} from '@angular/core'; 
import {FormControl} from "@angular/forms"; 
import {MapsAPILoader} from "@agm/core"; 
declare var google: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements AfterViewInit, OnInit { 
    constructor(
    private mapsAPILoader: MapsAPILoader, 
    private ngZone: NgZone 
) {} 
    title = 'app'; 
    // google maps zoom level 
    zoom: number = 8; 
    // initial center position for the map 
    lat: number = 51.673858; 
    lng: number = 7.815982; 
    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 
    } 
    ]; 

    public latitude: number; 
    public longitude: number; 
    public searchControl: FormControl; 
    @ViewChild('search') 
    public searchElementRef: ElementRef; 

    ngOnInit() { 
    this.zoom = 4; 
    this.latitude = 39.8282; 
    this.longitude = -98.5795; 

    //create search FormControl 
    this.searchControl = new FormControl(); 

    //set current position 
    this.setCurrentPosition(); 

    //load Places Autocomplete 
    this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
     types: ["address"] 
     }); 
     autocomplete.addListener("place_changed",() => { 
     this.ngZone.run(() => { 
      //get the place result 
      let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 

      //verify result 
      if (place.geometry === undefined || place.geometry === null) { 
      return; 
      } 

      //set latitude, longitude and zoom 
      this.latitude = place.geometry.location.lat(); 
      this.longitude = place.geometry.location.lng(); 
      this.zoom = 12; 
     }); 
     }); 
    }); 
    } 

    private setCurrentPosition() { 
    if ("geolocation" in navigator) { 
     navigator.geolocation.getCurrentPosition((position) => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 12; 
     }); 
    } 
    } 

    clickedMarker(label: string, index: number) { 
    console.log(`clicked the marker: ${label || index}`); 
    } 

    mapClicked($event: any) { 
    // console.log($event); 
    this.markers.push({ 
     lat: $event.coords.lat, 
     lng: $event.coords.lng, 
     label: 'A', 
     draggable: true 
    }); 
    } 


    markerDragEnd(m: marker, $event: MouseEvent) { 
    console.log('dragEnd', m, $event); 
    } 

    ngAfterViewInit() { 
    this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
     types: ["address"] 
     }); 
     autocomplete.addListener("place_changed",() => { 
     this.ngZone.run(() => { 
      //get the place result 
      let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 

      //verify result 
      if (place.geometry === undefined || place.geometry === null) { 
      return; 
      } 

      //set latitude, longitude and zoom 
      this.latitude = place.geometry.location.lat(); 
      this.longitude = place.geometry.location.lng(); 
      this.zoom = 12; 
     }); 
     }); 
    }); 
    } 



} 

interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
} 

HTMLファイル

<div class="container"> 
    <h1>Angular 2 + Google Maps Places Autocomplete</h1> 
    <div class="form-group"> 
    <input placeholder="search for location" autocorrect="off" 
      autocapitalize="off" spellcheck="off" type="text" class="form-control" #search > 
    </div> 
    <agm-map 
    (mapClick)="mapClicked($event)" 
    [latitude]="latitude" [longitude]="longitude" 
    [scrollwheel]="false" [zoom]="zoom"> 
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> 
    <agm-marker 
    *ngFor="let marker of markers" 
    [latitude]="marker.lat" 
    [longitude]="marker.lng" 
    ></agm-marker> 
    </agm-map> 
</div> 

Answer 1

私はnativeElementから "アドレス" を削除し、それが私の仕事：私は以下の私のコードが埋め込まれてきました。 すなわち次のように置き換えます。

自動完成= new google.maps.places.Autocomplete（this.searchElement.nativeElement、{}）;

Answer 2

型パラメータで "アドレス"を渡しているため、アドレスだけが検索されます。詳細情報については

は、次のリンクにアクセスしてください。 https://developers.google.com/places/web-service/autocomplete#place_types

ジャストタイプを削除し、あなたが検索ですべての場所を取得します。

オートコンプリート= new google.maps.places.Autocomplete（this.searchElementRef.nativeElement）;