setCenter ne fonctionne pas dans angulaire2-google-maps

Question

import { GoogleMapsAPIWrapper } from '@agm/core'; 
import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'core-map', 
    styleUrls: [ './map.component.scss' ], 
    templateUrl: './map.component.html', 
}) 
export class MapComponent { 
    constructor(
    public gMaps: GoogleMapsAPIWrapper 
) {} 

    public markerClicked = (markerObj) => { 
    this.gMaps.setCenter({ lat: markerObj.latitude, lng: markerObj.longitude }); 
    console.log('clicked', markerObj, { lat: markerObj.latitude, lng: markerObj.longitude }); 
    } 
} 
console output: Object {lat: 42.31277, lng: -91.24892} 

Vous avez également essayé panTo avec le même résultat.

Answer 1

Enfin obtenu ce travail. J'ai dû créer un composant enfant de agm-map et créer une sortie qui, en charge, récupère le wrapper api google maps natif et passe dans mon composant map parent. Je souhaite qu'ils l'aient fait afin que vous puissiez simplement saisir le wrapper gmaps api dans le composant agm-map régulier. Fonctionne avec panTo aussi bien.

PARENT MARKUP COMPOSANTE

<agm-map [latitude]='lat' [longitude]='lng' 
    [usePanning]='true'> 
    <agm-marker *ngFor='let location of locations' 
    [latitude]='location.latitude' 
    [longitude]='location.longitude' 
    [iconUrl]='location.icon' 
    (markerClick)='markerClicked(location)'></agm-marker> 
    <core-map-content (onMapLoad)='loadAPIWrapper($event)'></core-map-content> 
</agm-map> 

PARENT COMPOSANTE

/** 
* Map Component 
* API Docs: https://angular-maps.com/docs/api/latest/ts/ 
*/ 
import { GoogleMapsAPIWrapper } from '@agm/core'; 
import { Component, Input } from '@angular/core'; 

declare var google:any; 

@Component({ 
    selector: 'core-map', 
    styleUrls: [ './map.component.scss' ], 
    templateUrl: './map.component.html', 
}) 
export class MapComponent { 
    @Input() lat: number; 
    @Input() lng: number; 
    @Input() locations: {}; 
    map: any; 

    constructor(
    public gMaps: GoogleMapsAPIWrapper, 
) {} 

    public loadAPIWrapper(map) { 
    this.map = map; 
    } 

    public markerClicked = (markerObj) => { 
    const position = new google.maps.LatLng(markerObj.latitude, markerObj.longitude); 
    this.map.panTo(position); 
    } 
} 

ENFANT COMPOSANTE

import { Component, EventEmitter, OnInit, Output } from '@angular/core'; 

import { GoogleMapsAPIWrapper } from '@agm/core'; 

@Component({ 
    selector: 'core-map-content', 
    template: '', 
}) 
export class MapContentComponent implements OnInit { 
    @Output() onMapLoad: EventEmitter<{}> = new EventEmitter<{}>(); 

    constructor(public gMaps: GoogleMapsAPIWrapper) {} 

    ngOnInit() { 
    this.gMaps.getNativeMap().then((map) => { 
     this.onMapLoad.emit(map); 
    }); 
    } 
}