setCenter在angular2谷歌地图中不工作

我们也尝试过panTo，但效果相同。

最终成功。必须创建agm map的子组件

agm map

，并创建一个输出，在加载时获取本机google maps api包装并传递到我的父map组件。我希望他们成功了，这样你就可以在常规的

agm-map

组件中获取gmaps-api包装。和潘托一起工作

父组件标记

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}

子组件

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

从'@angular/core'导入{Component，EventEmitter，OnInit，Output}；
从“@agm/core”导入{GoogleMapsapiwraper}；
@组成部分({
选择器：“核心地图内容”，
模板：“”，
})
导出类MapContentComponent实现OnInit{
@加载时输出（）：EventEmitter=新的EventEmitter（）；
构造函数（公共gmap:googlemapsapiwiwrapper）{}
恩戈尼尼特（）{
this.gMaps.getNativeMap（）。然后（（map）=>{
这个.onMapLoad.emit（map）；
});
}
}

可能是在Christopher发布解决方案后添加的，但agm map有一个mapReady事件，返回可用于访问setCenter（）的原始地图对象

修改原始代码：

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

然后将以下内容添加到agm地图中

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

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

  constructor() {}

  protected mapReady(map) {
    this.map = map;
  }

  public markerClicked = (markerObj) => {
    if (this.map)
      this.map.setCenter({ lat: markerObj.latitude, lng: markerObj.longitude });
    console.log('clicked', markerObj, { lat: markerObj.latitude, lng: markerObj.longitude });
  }
}

---

google.maps.Map可在MapReady事件中访问

<agm-map (mapReady)="mapReady($event)"></agm-map>

---

你能提供更多关于这个问题的细节吗？没有任何一种方法比使用子组件更好？@f.khantsis正确，这是我找到的唯一解决方案。这不是很优雅。我想补充一点，您不需要

gMap

注入，因为实例将来自子实例。您也不需要将包装器添加到模块提供程序中，只需使用

this.map

实例即可。我不确定为什么agm组件默认情况下不公开包装器，但显然这是出于设计：当agm地图实例被创建时，GoogleMapsapiwrapper就会被创建。这完全是有意的。我们为每个映射维护一个实例。如果您想获得映射的实例，可以创建一个自定义组件，并通过构造函数注入GoogleMapsAPIWrapper。简言之，是的，这显然是唯一的方法，而且是有意的。太糟糕了，AGM文档几乎不存在，这是一个很好的库工作。哇，这很好，谢谢分享。正如cen提到的，遗憾的是这并没有更好的记录，我在这方面浪费了太多时间，看起来好多了。将标记为与此看起来一样正确，以解决对地图的访问。如果您这样做。map.panTo（位置），它将非常平滑：）

<agm-map #geoMap [ngClass]="{'hide': !(showGeoMapDiagram$ | async)}"
    (window:resize)="onWindowResize()"    
    [latitude]="centerMapLat"
    [longitude]="centerMapLng"
    [mapTypeId]="mapTypeId"
    [mapTypeControl]="true"
    [zoom]="mapZoom"
    (mapReady)="onMapReady($event)"

>
</agm-map>

onMapReady(event: any)
  {
    this.diagramOverlay = new ShotDiagramOverlay();
    this.diagramOverlay.setMap(event);
    this.drawDiagramOnGeoMapSubscription = this.diagramOverlay.readyToDrawAction$.subscribe(() => this.drawDiagramOnGeoMap())
  }