2017-10-05 133 views
0

我想整合谷歌地圖佔位符,以便最終用戶可以搜索他/她的地方,但在香草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> 
+0

'只顯示我只選擇的地方'預期的行爲是什麼? – yurzui

+0

我需要該用戶可以自由搜索所有地方,因爲它發生在Google提供的地圖API中我在香草javascript中實現了這個功能(https://developers.google.com/maps/documentation/javascript/examples/places-searchbox)但不確定如何在Angular 4中實現它 –

回答

0

我從nativeElement刪除 「地址」,它爲我工作。 即替換爲:

let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement,{});

0

因爲在類型參數中你已經通過了「地址」,所以只有地址會被搜索。

欲瞭解更多信息請訪問以下鏈接: https://developers.google.com/places/web-service/autocomplete#place_types

只是刪除類型,你會得到搜索的所有地方。

let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);