setCenter不能在angular2-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} 

也試過panTo具有相同的結果。

Answer 1

終於得到了這個工作。必須創建一個agm-map的子組件，並創建一個負載輸出，抓取本地谷歌地圖api包裝並傳遞到我的父映射組件。我希望他們這樣做，所以你可以在常規的agm-map組件中抓取gmaps api包裝。與panTo一起工作。

家長組件標記

<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> 

父組件

/** 
* 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); 
    } 
} 

子組件

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); 
    }); 
    } 
}