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;
|
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.subject.next();
|
this.subject.destroy();
|
}
|
}
|
