setCenter aynı sonucu

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} 

Ayrıca denedim panto angular2-google-haritalarda çalışmıyor.

Answer 1

Sonunda bu çalışma var. agm-map'un bir alt bileşenini oluşturmak ve yükte bulunan bir çıktı oluşturmak, yerel google maps api sarmalayıcıyı kapmak ve ana harita bileşenime iletmek zorunda kaldım. Keşke bunu yapabilseydiniz, böylece düzenli olarak agm-map bileşenindeki gmaps api sarmalayıcıyı yakalayabilirsiniz. PanTo ile de çalışır.

VELİ PARÇA ANLAMLANDIRMA

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

VELİ PARÇA

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

ÇOCUK PARÇA

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