typescript setCenter 在 angular2-google-maps 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44315771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setCenter not working in angular2-google-maps
提问by Christopher Marshall
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}
Also have tried panTo with the same result.
也试过 panTo 有相同的结果。
回答by Christopher Marshall
Finally got this working. Had to create a child component of agm-mapand create an output that on load, grabs the native google maps api wrapper and passes into my parent map component. I wish they made it so you could just grab the gmaps api wrapper in the regular agm-mapcomponent. Works with panTo as well.
终于得到了这个工作。必须创建一个子组件agm-map并创建一个输出，该输出在加载时抓取本机 google maps api 包装器并传递到我的父地图组件中。我希望他们做到了，这样您就可以在常规agm-map组件中获取 gmaps api 包装器。也适用于 panTo。
PARENT 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>
PARENT 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);
}
}
CHILD 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);
});
}
}
回答by Brian Burton
Perhaps it's been added since Christopher posted his solution, but agm-map has a mapReady event that returns the raw map object that you can use to access setCenter().
也许自从 Christopher 发布他的解决方案后就已经添加了它，但是 agm-map 有一个 mapReady 事件，它返回可用于访问 setCenter() 的原始地图对象。
Modification of your original code:
修改你的原始代码：
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 });
}
}
Then add the following to agm-map
然后将以下内容添加到 agm-map
<agm-map (mapReady)="mapReady($event)"></agm-map>
