import { Component, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef, NgZone, OnDestroy } from '@angular/core';
|
import { AbmComponent } from 'angular-baidu-maps';
|
|
declare const BMap: any;
|
declare const BMAP_SATELLITE_MAP: any;
|
|
@Component({
|
selector: 'app-maps-baidu',
|
templateUrl: './baidu.component.html'
|
})
|
export class MapsBaiduComponent implements OnDestroy {
|
|
options: any = {};
|
status = '';
|
@ViewChild('map') mapComp: AbmComponent;
|
satelliteOptions: any;
|
private mapSatellite: any;
|
|
constructor(private el: ElementRef, private zone: NgZone) { }
|
|
private _map: any;
|
onReady(map: any) {
|
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: any) {
|
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: any) {
|
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
|
map.setMapType(BMAP_SATELLITE_MAP);
|
this.mapSatellite = map;
|
}
|
|
ngOnDestroy(): void {
|
this._map.removeEventListener('click', this._click.bind(this));
|
}
|
|
}
|
