import { Component, ViewChild, ElementRef, NgZone, OnDestroy } from '@angular/core';
|
import { AqmComponent } from 'angular-qq-maps';
|
|
declare const qq: any;
|
|
@Component({
|
selector: 'app-maps-qq',
|
templateUrl: './qq.component.html'
|
})
|
export class MapsQQComponent implements OnDestroy {
|
options: any = {};
|
status = '';
|
@ViewChild('map') mapComp: AqmComponent;
|
satelliteOptions: any;
|
private mapSatellite: any;
|
|
constructor(private el: ElementRef, private zone: NgZone) { }
|
|
private map: any;
|
onReady(mapNative: any) {
|
mapNative.setOptions({
|
zoom: 12,
|
center: new qq.maps.LatLng(39.916527, 116.397128)
|
});
|
this.map = mapNative;
|
this.status = '加载完成';
|
// 添加监听事件
|
qq.maps.event.addListener(this.map, 'click', (event: any) => {
|
// tslint:disable-next-line:no-unused-expression
|
new qq.maps.Marker({
|
position: event.latLng,
|
map: this.map
|
});
|
this.zone.run(() => {
|
this.status = `click ${+new Date}`;
|
});
|
});
|
}
|
|
panTo() {
|
this.map.panTo(new qq.maps.LatLng(39.9, 116.4));
|
}
|
|
zoom() {
|
this.map.zoomTo((this.map.getZoom() + 1) % 17);
|
}
|
|
infoWindow() {
|
const infoWin = new qq.maps.InfoWindow({
|
map: this.map
|
});
|
infoWin.open();
|
infoWin.setContent('Hello world');
|
infoWin.setPosition(this.map.getCenter());
|
}
|
|
// 卫星
|
onReadySatellite(mapNative: any) {
|
mapNative.setOptions({
|
zoom: 14,
|
center: new qq.maps.LatLng(39.916527, 116.397128),
|
mapTypeId: qq.maps.MapTypeId.SATELLITE
|
});
|
this.mapSatellite = mapNative;
|
}
|
|
ngOnDestroy(): void {
|
['click'].forEach(eventName => {
|
qq.maps.event.clearListeners(this.map, eventName);
|
});
|
}
|
}
|
