我有以下代码来加载Angular Google Maps(AGM)。我需要使用PlacesService API将地图上的标记与地点一起加载。
<agm-map
(mapReady)="mapReady($event)"
(mapClick)="close_window()"
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom">
<agm-marker
*ngFor="let m of mapArrayList; let i = index"
(markerClick)="clickedMarker(infowindow);getDistanceMatrix(m.geometry.location.lat,m.geometry.location.lng)"
[latitude]="m.geometry.location.lat"
[longitude]="m.geometry.location.lng">
</agm-marker>
</agm-map>
在我的组件类中:
mapReady($event: any) {
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: {
lat: 29.9751765,
lng: 31.3087244
},
radius: 5000,
type: ['atm']
}, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
this.mapArrayList = results;
// this.createMarker(results[i]);
}
}
});
var myplace = {
lat: 29.9751765,
lng: 31.3087244
};
}
我能够使用JavaScript实现相同的目标。但是我想使用agm实现以下代码。
在组件模板中:
<div #map id="map"></div>
在组件类中
ngOnInit() {
map = new google.maps.Map(this.mapElement.nativeElement, {
center: {
lat: 29.9751765,
lng: 31.3087244
},
zoom: 13
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: {
lat: 29.9751765,
lng: 31.3087244
},
radius: 5000,
type: ['atm']
}, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
this.createMarker(results[i]);
}
}
});
var myplace = {
lat: 29.9751765,
lng: 31.3087244
};
}