setCenter không hoạt động trong 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} 

Cũng đã thử panTo với cùng một kết quả.

Answer 1

Cuối cùng, tính năng này hoạt động. Đã phải tạo một thành phần con của agm-map và tạo ra một kết quả đầu ra khi tải, lấy gói bản đồ api bản đồ google bản địa và chuyển vào thành phần bản đồ gốc của tôi. Tôi ước họ đã tạo ra nó để bạn có thể lấy gmaps api wrapper trong thành phần thông thường agm-map. Làm việc với panTo là tốt.

PHỤ HUYNH COMPONENT Markup

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

PHỤ HUYNH COMPONENT

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

CON COMPONENT

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