我想整合谷歌地圖佔位符,以便最終用戶可以搜索他/她的地方,但在香草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>
'只顯示我只選擇的地方'預期的行爲是什麼? – yurzui
我需要該用戶可以自由搜索所有地方,因爲它發生在Google提供的地圖API中我在香草javascript中實現了這個功能(https://developers.google.com/maps/documentation/javascript/examples/places-searchbox)但不確定如何在Angular 4中實現它 –