Question

我想整合谷歌地图占位符，以便最终用户可以搜索他/她的地方，但在香草javascript我已经集成这个并按预期工作，现在我正在尝试将其转换为Angular 4项目一切正常除了我的谷歌地图占位符只显示我选择的地方这一事实。你可以考虑这个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

因为在类型参数中你传递了“地址”。所以只搜索地址。

有关详情，请访问以下链接： https://developers.google.com/places/web-service/autocomplete#place_types

只需删除类型，您就会获得所有搜索位置。

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

Answer 2

我删除了＆＃34;地址＆＃34;来自nativeElement，它对我有用。 即替换为：

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

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

2 个答案: