角谷歌地图地方自动完成不显示所有地方

Question

我想整合谷歌地图占位符，以便最终用户可以搜索他/她的地方，但在香草JavaScript我已经整合了这一点，并按预期工作，现在我试图将其转换为Angular 4项目一切正常，除了我的谷歌地图占位符只显示我只选择的地方。你可以考虑这个plunkr因为我也使用这个代码。此外，我正在使用Angular Google Map模块。请建议替代此API或任何工作？我下面嵌入我的代码：
TS文件

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删除 “地址”，它为我工作。 即替换为：

let autocomplete = new google.maps.places.Autocomplete（this.searchElement.nativeElement，{}）;

Answer 2

因为在类型参数中你已经通过了“地址”，所以只有地址会被搜索。

欲了解更多信息请访问以下链接： https://developers.google.com/places/web-service/autocomplete#place_types

只是删除类型，你会得到搜索的所有地方。

let autocomplete = new google.maps.places.Autocomplete（this.searchElementRef.nativeElement）;