我正在尝试以编程方式设置AGM地图的缩放级别。
如果我...
HTML
<button (click)="changeZoom(2)">zoom</button>
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="currZoom"
[mapTypeId]="mapType"
[mapTypeControl]="mapControls"
[zoomControl]="mapControls"
[streetViewControl]="mapControls">
</agm-map>
组件代码
export class MsMapComponent implements OnInit {
lat: number = msFormValues.googleLat;
lng: number = msFormValues.googleLng;
currZoom: number = msFormValues.googleZoom;
mapType = 'satellite' ;
mapControls = false;
constructor() {
}
ngOnInit() {
const osmLayer = new TileLayer({
source: new OSM()
});
const xyzLayer = new TileLayer({
source: new XYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
})
});
msFormValues.view = new View({
center: [0,0],
zoom: 0,
projection: 'EPSG:3857',
maxZoom: 20,
minZoom: 5
});
msFormValues.googleZoom = msFormValues.view.getZoom();
msFormValues.map = new olMap({
target: 'map',
layers: [
osmLayer,
// xyzLayer
],
view: msFormValues.view
});
msFormValues.view.on('change:center',function(){
var mapCenter = transform(msFormValues.view.getCenter(),'EPSG:3857',
'EPSG:4326');
msFormValues.googleLat = mapCenter[1];
msFormValues.googleLng = mapCenter[0];
});
msFormValues.view.on('change:resolution',function(){
msFormValues.googleZoom = msFormValues.view.getZoom();
this.currZoom = 2;
});
}
setMapType(mapTypeId: string) {}
changeZoom(zoomLeve: number){
this.currZoom = zoomLeve;
}
}
单身人士价值观
@Injectable()
export class msFormValues {
public static cropYear: any = '';
public static map: any = null;
public static view: any = null;
public static googleLat: any = 0;
public static googleLng: any = 0;
public static googleZoom: any = 5;
}
如果我通过单击按钮调用“changeZoom”并更新变量“currZoom”,则AGM贴图会响应并更新缩放级别。但是,如果我从“更改:分辨率”内部更新“currZoom”,则AGM地图不会更新......如果我尝试从“更改:解决方案”内部调用“changeZoom”,请注意“changeZoom”功能是“未定义。
更新看起来像“更改:解决方案”中的“this.currZoom”是“未定义”,不知道为什么那将是我宣布它的地方。
任何帮助是极大的赞赏!!
好的,所以“更改:解决方案”中的“this.currZoom”未定义的事实给了我一个线索......
我做的是......
定义我的单身......
formValues = msFormValues;
然后在我设置的单例变量上指向属性
<agm-map
[latitude]=(formValues.googleLat)
[longitude]=(formValues.googleLng)
[zoom]=(formValues.googleZoom)
[mapTypeId]="mapType"
[mapTypeControl]="mapControls"
[zoomControl]="mapControls"
[streetViewControl]="mapControls">
</agm-map>
然后我刚刚更新了'change:resolution'中的单例值
msFormValues.view.on('change:resolution',function(){
msFormValues.googleZoom = msFormValues.view.getZoom();
});
......一切都很开心!