Angular 2 agm library for google maps setting place by place id

问题:

I am implementing in a page a google map where a place id is passed to me, I then need to obtain such place id and load the map with that marker. I was going through the documentation but its not clear on how i can target the map object from the <agm-map> tag so that i can set the place id. Here is part of the code:

  public latitude: number;   public longitude: number;   public zoom: number;   public placeid: string;    constructor(     private mapsAPILoader: MapsAPILoader,     private ngZone: NgZone   ) {}    ngOnInit() {       //set google maps defaults       this.zoom = 4;       this.latitude = 39.8282;       this.longitude = -98.5795;       this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ";        //set current position       this.setCurrentPosition();        this.mapsAPILoader.load().then(() => {             //How do i set the agm-map here to load the map with the placeid        });     }      private setCurrentPosition() {       if ("geolocation" in navigator) {         navigator.geolocation.getCurrentPosition((position) => {           this.latitude = position.coords.latitude;           this.longitude = position.coords.longitude;           this.zoom = 12;         });       }     } 

Then on the html file I have something like this:

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">       <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> </agm-map> 

I looked at the GOOGLE documentation and it looks like to set the place id you would need something like this

var request = {   placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' };  service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);  function callback(place, status) {   if (status == google.maps.places.PlacesServiceStatus.OK) {     createMarker(place);   } } 

The problem i have is that i am not sure as to what to pass for map since i am using <agm-map>.

回答1:

You can use mapReady output property of agm-map. Change your html to

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)">       <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> </agm-map> 

and define following functions in your component. This function will be called when your map is ready.

mapReady($event: any) {    // here $event will be of type google.maps.Map    // and you can put your logic here to get lat lng for marker. I have just put a sample code. You can refactor it the way you want.   this.getLatLong('ChIJN1t_tDeuEmsRUsoyG83frY4', $event, null); }  getLatLong(placeid: string, map: any, fn) {     let placeService = new google.maps.places.PlacesService(map);     placeService.getDetails({       placeId: placeid       }, function (result, status) {         console.log(result.geometry.location.lat());         console.log(result.geometry.location.lng())       });   } 

Change / refactor this sample code according to your need such that you are able set values to latitude and longitude parameters that you are passing to html.

<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> 

文章来源: Angular 2 agm library for google maps setting place by place id