import { NzModalSubject } from 'ng-zorro-antd';
|
import { ReactiveFormsModule } from '@angular/forms';
|
import { ViewEncapsulation, Component, ViewChild, ElementRef, NgZone, OnInit } 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 implements OnInit {
|
Default_LNG = 121;
|
Default_LAT = 31.4;
|
showZoom = 19;
|
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) {
|
|
}
|
ngOnInit(): void {
|
this.data = this.coorPickerService.data;
|
let lng = this.data.longitude;
|
lng = !lng ? this.Default_LNG : lng;
|
this.data.longitude = lng;
|
let lat = this.data.latitude;
|
lat = !lat ? this.Default_LAT : lat;
|
this.data.latitude = lat;
|
this.options = {
|
minZoom: 3,
|
maxZoom: 19,
|
cursor: 'default',
|
centerAndZoom: {
|
lng: this.data.longitude,
|
lat: this.data.latitude,
|
zoom: this.showZoom
|
},
|
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
|
&& !!this.data.address.trim()) {
|
this.mapSearch(this.data.address);
|
}
|
}
|
city: string;
|
// queryText: string;
|
mapSearch(queryText: string, isSearch?: boolean) {
|
|
if (!!queryText && !!queryText.trim()) {
|
this.city = !!this.city ? this.city : '北京市';
|
const end = queryText.indexOf('市') + 1;
|
if (end > 0) {
|
let start = queryText.indexOf('省') + 1;
|
start = start > 0 ? start : queryText.indexOf('区') + 1;
|
start = start > end ? 0 : start;
|
if (start < end) {
|
this.city = queryText.slice(start, end).trim();
|
if (!!this.city) {
|
this._map.setCurrentCity(this.city);
|
}
|
}
|
}
|
console.log(this.city);
|
const myGeo = new this._BMap.Geocoder();
|
const that = this;
|
that._map.setCurrentCity(that.city);
|
myGeo.getPoint(queryText, function(point){
|
let getPoint = false;
|
if (point) {
|
that.data.latitude = point.lat;
|
that.data.longitude = point.lng;
|
getPoint = true;
|
}else {
|
console.log('您选择地址没有解析到结果!');
|
}
|
that.markerOption.point = {
|
lng: that.data.longitude,
|
lat: that.data.latitude
|
};
|
that.options.centerAndZoom = {
|
lng: that.data.longitude,
|
lat: that.data.latitude,
|
zoom: that.showZoom
|
};
|
// setTimeout(() => {
|
if (getPoint && !isSearch) {
|
that._map.centerAndZoom(point, that.showZoom);
|
|
} else {
|
that._localSearch.search(queryText);
|
}
|
// }, 3000);
|
}, that.city);
|
}
|
}
|
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();
|
}
|
}
|
