import { NzModalSubject } from 'ng-zorro-antd';
|
import { ReactiveFormsModule } from '@angular/forms';
|
import { ViewEncapsulation, Component, ViewChild, ElementRef, NgZone } from '@angular/core';
|
import { MapOptions, Point, MarkerOptions, ControlAnchor, NavigationControlOptions, NavigationControlType, BMapInstance } from 'angular2-baidu-map';
|
import { CoorPicker } from '@business/entity/data';
|
import { CoorPickerService } from 'app/routes/map/coordinates-picker/coordinates-picker.service';
|
|
|
|
@Component({
|
encapsulation: ViewEncapsulation.None,
|
selector: 'app-coordinates-picker',
|
templateUrl: './coordinates-picker.component.html',
|
styleUrls: [ './coordinates-picker.component.css' ],
|
})
|
export class CoordinatesPickerComponent {
|
Default_LNG = 121;
|
Default_LAT = 31.4;
|
isSaving = false;
|
markerOption: {
|
point: Point,
|
options: MarkerOptions
|
} = {
|
point: null,
|
options: null
|
};
|
data: CoorPicker;
|
navigationOpts: NavigationControlOptions;
|
options: MapOptions;
|
_BMap: any = null;
|
|
constructor(private subject: NzModalSubject, private coorPickerService: CoorPickerService) {
|
this.data = this.coorPickerService.data;
|
let lng = this.data.longitude;
|
lng = lng === 0 || lng == null ? this.Default_LNG : lng;
|
this.data.longitude = lng;
|
let lat = this.data.latitude;
|
lat = lat === 0 || lat == null ? this.Default_LAT : lat;
|
this.data.latitude = lat;
|
this.options = {
|
minZoom: 3,
|
maxZoom: 19,
|
cursor: 'default',
|
centerAndZoom: {
|
lng: lng,
|
lat: lat,
|
zoom: 19
|
},
|
enableKeyboard: true
|
};
|
this.navigationOpts = {
|
anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
|
};
|
this.markerOption.point = {
|
lng: lng,
|
lat: lat
|
};
|
this.markerOption.options = {
|
icon: {
|
imageUrl: './assets/img/map_coordinates.png',
|
size: {
|
height: 30,
|
width: 30
|
}
|
},
|
offset: {
|
height: -30,
|
width: -15
|
}
|
};
|
}
|
private _marker: any = null;
|
loadMarker(marker) {
|
if (this._marker == null) {
|
this._marker = marker;
|
}
|
}
|
private _map: any;
|
private _localSearch;
|
loadMap(map: any) {
|
this._map = map;
|
this._BMap = window.BMap;
|
this._map.addEventListener(
|
'tilesloaded',
|
(type, fn) => {
|
this._map.clearOverlays();
|
this._map.addOverlay(this._marker);
|
}
|
);
|
this._localSearch = new this._BMap.LocalSearch(map, {
|
renderOptions: {map: map}
|
});
|
if (this.data.latitude === this.Default_LAT && this.data.longitude === this.Default_LNG
|
&& this.data.address != null) {
|
this._localSearch.search(this.data.address);
|
}
|
|
}
|
queryTest: string;
|
mapSearch(param: any) {
|
let text = this.queryTest;
|
text = text == null || text.trim() === '' ? '昆山市' : text;
|
this._localSearch.search(text);
|
}
|
clickMap(e: any) {
|
this.markerOption.point = {
|
lng: e.point.lng,
|
lat: e.point.lat
|
};
|
this.coorPickerService.data.longitude = e.point.lng;
|
this.coorPickerService.data.latitude = e.point.lat;
|
}
|
close() {
|
this.subject.destroy();
|
}
|
save() {
|
this.isSaving = true;
|
this.subject.next();
|
this.subject.destroy();
|
}
|
}
|
