import { Component , ViewChild , ElementRef , NgZone , OnDestroy } from '@angular/core' ; import { AqmComponent } from 'angular-qq-maps' ; declare const qq ; @ 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 , private zone ) { } private map : any ; onReady ( mapNative ) { 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 ) => { 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 ) { mapNative . setOptions ( { zoom : 14 , center : new qq . maps . LatLng ( 39.916527 , 116.397128 ) , mapTypeId : qq . maps . MapTypeId . SATELLITE } ) ; this . mapSatellite = mapNative ; } ngOnDestroy ( ) { [ 'click' ] . forEach ( eventName => { qq . maps . event . clearListeners ( this . map , eventName ) ; } ) ; } }