<template>
|
<a-modal
|
title="坐标选择"
|
destroyOnClose
|
:visible="true"
|
@ok="addLonAndLat"
|
@cancel="handleMapCancel"
|
okText="确定"
|
class="modalStyle"
|
>
|
<div>
|
<p>
|
<span>地址：</span
|
><a-input
|
v-model="keyword"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
<span style="margin-left: 25px">经度：</span
|
><a-input
|
v-model="clickPoint.lng"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
<span style="margin-left: 25px">纬度：</span
|
><a-input
|
v-model="clickPoint.lat"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
</p>
|
<!-- :scroll-wheel-zoom="true"-->
|
<baidu-map
|
:center="center"
|
:zoom="zoom"
|
@ready="handler"
|
@click="mapClick"
|
:scroll-wheel-zoom="true"
|
style="height: 400px; width: 100%"
|
>
|
<bm-control>
|
<bm-local-search
|
:keyword="keyword"
|
:auto-viewport="true"
|
style="display: none"
|
></bm-local-search>
|
<bm-marker
|
:position="{ lng: clickPoint.lng, lat: clickPoint.lat }"
|
:dragging="true"
|
animation="BMAP_ANIMATION_BOUNCE"
|
>
|
</bm-marker>
|
</bm-control>
|
</baidu-map>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit, Watch,
|
} from 'vue-property-decorator';
|
import any = jasmine.any;
|
import { get, post } from "@/util/request";
|
|
|
@Component({
|
})
|
export default class PickCoordinate extends Vue {
|
private center: any = {
|
lng: 120.726838,
|
lat: 31.3421
|
}
|
@Prop({
|
type: String,
|
default: ''
|
})
|
private lnglat!: string
|
|
@Prop({
|
type: String,
|
default: ''
|
})
|
private typeOperation!: string
|
|
private keyword: string = ''
|
private zoom = 3
|
|
@Watch('clickPoint', {deep: true})
|
private monitorMapFlag(newVal: any, oldVal: any) {
|
this.center.lng = newVal.lng
|
this.center.lat = newVal.lat
|
}
|
|
@Watch('lnglat', {deep: true, immediate: true})
|
private lnglatWatch(newVal: any, oldVal: any) {
|
console.log('------------');
|
console.log(newVal);
|
// this.center.lng = newVal.lng
|
// this.center.lat = newVal.lat
|
}
|
private created() {
|
|
}
|
|
|
|
|
// 初始化地图
|
private handler({BMap, map}) {
|
this.center.lng = this.typeOperation === 'add' ? '120.726838' : this.lnglat.split(',')[1]
|
this.center.lat = this.typeOperation === 'add' ? '31.3421' : this.lnglat.split(',')[0]
|
this.zoom = 19
|
|
}
|
// 初始定位到星虹国际
|
private clickPoint: any = this.lnglat === '' ? {
|
lng: ' 120.726838',
|
lat: ' 31.3421'
|
} : {
|
lng: this.lnglat.split(',')[1],
|
lat: this.lnglat.split(',')[0]
|
}
|
|
private mapClick(e: any) {
|
const { lng, lat } = e.point
|
this.clickPoint.lng = lng
|
this.clickPoint.lat = lat
|
}
|
|
private handleMapCancel() {
|
this.keyword = ''
|
this.flagSend(false)
|
}
|
|
private addLonAndLat() {
|
if (this.typeOperation === 'add') {
|
this.sendLonLat(this.clickPoint)
|
} else {
|
this.editLonLat(this.clickPoint)
|
}
|
|
this.flagSend(false)
|
}
|
|
@Emit('mapFlag1')
|
private flagSend(flag: boolean) {
|
return flag;
|
}
|
|
@Emit('sendLonLat')
|
private sendLonLat(lonLat: any) {
|
return lonLat;
|
}
|
|
@Emit('editLonLat')
|
private editLonLat(lonLat: any) {
|
return lonLat;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.modalStyle {
|
.ant-modal {
|
margin-left: 25%;
|
}
|
.ant-modal-content {
|
width: 800px;
|
}
|
}
|
.BMap_cpyCtrl,
|
.anchorBL {
|
display: none;
|
}
|
</style>
|
