import { Component , ViewEncapsulation , ViewChild , OnDestroy } from '@angular/core' ; import { AbmComponent } from 'angular-baidu-maps' ; declare const BMap ; declare const BMapLib ; declare const BMAP_SATELLITE_MAP ; @ Component ( { selector : 'demo' , templateUrl : './demo.component.html' , styleUrls : [ './demo.component.scss' ] , encapsulation : ViewEncapsulation . None , } ) export class DemoComponent implements OnDestroy { options : any = { } ; bMapLibOptions : any = { } ; status = '' ; @ ViewChild ( 'map' ) mapComp ! : AbmComponent ; private _map : any ; satelliteOptions : any ; onReady ( map ) { this . _map = map ; map . centerAndZoom ( new BMap . Point ( 116.404 , 39.915 ) , 11 ) ; map . addControl ( new BMap . MapTypeControl ( ) ) ; map . setCurrentCity ( '北京' ) ; map . enableScrollWheelZoom ( true ) ; this . status = '加载完成' ; map . addEventListener ( 'tilesloaded' , ( ) => { this . status = '地图加载完毕' ; } ) ; map . addEventListener ( 'click' , this . _click . bind ( this ) ) ; } _click ( e ) { this . status = `${ e . point . lng }, ${ e . point . lat }, ${ + new Date ( ) }` ; } panTo ( ) { this . _map . panTo ( new BMap . Point ( 116.404 , 39.715 ) ) ; } zoom ( ) { this . _map . setZoom ( ( this . _map . getZoom ( ) + 1 ) % 17 ) ; } infoWindow ( ) { const infoWin = new BMap . InfoWindow ( '地址：北京市东城区王府井大街88号乐天银泰百货八层' , { width : 200 , height : 100 , title : '海底捞王府井店' , enableMessage : true , message : '亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~' , } ) ; this . _map . openInfoWindow ( infoWin , this . _map . getCenter ( ) ) ; } onReadySatellite ( map ) { map . centerAndZoom ( new BMap . Point ( 116.404 , 39.915 ) , 11 ) ; map . setMapType ( BMAP_SATELLITE_MAP ) ; } onReadyBMapLib ( map ) { map . centerAndZoom ( '重庆' , 12 ) ; const myDrag = new BMapLib . RectangleZoom ( map , { followText : '拖拽鼠标进行操作' , } ) ; myDrag . open ( ) ; } ngOnDestroy ( ) { this . _map . removeEventListener ( 'click' , this . _click . bind ( this ) ) ; } }