moral_manage.git

			@@ -1,37 +1,101 @@
			<template>
			<a-modal
			title="坐标选择"
			destroyOnClose
			:visible="true"
			@ok="addLonAndLat"
			@cancel="handleMapCancel"
			okText="确定"
			class="modalStyle"
			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
			<div style="display: flex">
			<div style="display: flex; width: 300px">
			<div>地址：</div>
			<!-- <a-input
			placeholder="关键字搜索"
			id="tipinput"
			style="width: 160px; height: 26px"
			></a-input> -->
			<a-input
			v-model="input"
			placeholder="关键字搜索"
			id="tipinput"
			style="width: 160px; height: 26px"
			@change="searchMap"
			></a-input>
			<!-- <input v-model="input" id="tipinput" /><button @click="searchAddress">
			搜索
			</button> -->
			<!-- <a-button
			size="small"
			type="primary"
			@click="searchMap"
			style="margin-left: 10px"
			>搜索</a-button
			> -->

			<!-- <el-amap-search-box
			:search-option="searchOption"
			:on-search-result="selectPoi"
			style="width: 200px; height: 26px; margin-left: 10px;border;"
			/> -->
			<!-- <a-input style="width: 160px; height: 26px" @focus="selectPoi" /> -->
			</div>
			<div>
			<span style="margin-left: 25px">经度：</span
			><a-input
			v-model="clickPoint[0]"
			style="display: inline; width: 160px; height: 26px"
			/>
			</div>
			<div>
			<span style="margin-left: 25px">纬度：</span
			><a-input
			v-model="clickPoint[1]"
			style="display: inline; width: 160px; height: 26px"
			/>
			</div>
			</div>
			<el-amap
			ref="map"
			:center="clickPoint"
			:events="{ click: mapClick }"
			:zoom="zoom"
			:scroll-wheel-zoom="true"
			style="height: 400px; width: 100%; margin-top: 20px"
			>
			<el-amap-marker
			:position="clickPoint"
			animation="AMAP_ANIMATION_BOUNCE"
			:dragging="true"
			></el-amap-marker>
			</el-amap>
			<!-- :scroll-wheel-zoom="true"-->
			<!-- <baidu-map
			:center="center"
			:zoom="zoom"
			@ready="handler"
			@click="mapClFick"
			@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>
			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">
			@@ -48,10 +112,10 @@
			@Component({
			})
			export default class PickCoordinate extends Vue {
			private center: any = {
			lng: 120.726838,
			lat: 31.3421
			}
			private center: any = [
			120.726838,
			31.3421
			]
			@Prop({
			type: String,
			default: ''
			@@ -65,13 +129,17 @@
			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
			private zoom = 19
			private searchOption:any={
			city: '全国',
			citylimit: false
			}
			@Watch('clickPoint', {deep: true, immediate: true},)
			private monitorMapFlag(newVal: any, oldVal: any) {
			console.log(newVal,'newVal');
			this.center= [newVal.lng,newVal.lat]
			}
			private num1:any=1

			@Watch('lnglat', {deep: true, immediate: true})
			private lnglatWatch(newVal: any, oldVal: any) {
			@@ -81,32 +149,67 @@
			// this.center.lat = newVal.lat
			}
			private created() {

			console.log(this.clickPoint,'clickPoint');
			}




			// 初始化地图
			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 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 selectPoi(e){
			// console.log(e);
			// let poi = e
			// if (poi.length > 0) {
			// this.clickPoint = [poi[0].lng, poi[0].lat]
			// }
			// }
			private input:any=''
			private mark:any=''
			private searchMap(){
			var autoOptions = {
			input: "tipinput"
			};
			var self=this
			var auto = new AMap.Autocomplete(autoOptions);
			const placeSearch = new AMap.PlaceSearch(self.input);
			// console.log(window);
			auto.on("select", select);//注册监听，当选中某条记录时会触发
			function select(e) {
			placeSearch.setCity(e.poi.adcode);
			placeSearch.search(e.poi.name); //关键字查询查询
			self.clickPoint = [e.poi.location.lng, e.poi.location.lat]
			}
			}
			// private searchAddress() {
			// var placeSearch = new AMap.PlaceSearch({
			// pageSize: 5, // 单页显示结果条数
			// pageIndex: 1, // 页码
			// city: "全国", // 兴趣点城市
			// citylimit: true, //是否强制限制在设置的城市内搜索
			// panel: "panel", // 结果列表将在此容器中进行展示。
			// autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
			// });
			// //关键字查询
			// placeSearch.search('北京大学');

			// }
			// 初始定位到星虹国际
			private clickPoint: any = this.lnglat === '' ? {
			lng: ' 120.726838',
			lat: ' 31.3421'
			} : {
			lng: this.lnglat.split(',')[1],
			lat: this.lnglat.split(',')[0]
			}
			private clickPoint: any = this.lnglat === '' ? [
			120.720262,
			31.335757
			] : [
			this.lnglat.split(',')[1],
			this.lnglat.split(',')[0]
			]

			private mapClick(e: any) {
			const { lng, lat } = e.point
			this.clickPoint.lng = lng
			this.clickPoint.lat = lat
			const { lng, lat } = e.lnglat
			this.clickPoint=[ lng, lat]
			this.$forceUpdate()
			// console.log(this.clickPoint);
			}

			private handleMapCancel() {
			@@ -116,11 +219,12 @@

			private addLonAndLat() {
			if (this.typeOperation === 'add') {
			console.log('add');
			this.sendLonLat(this.clickPoint)
			} else {
			console.log('upa');
			this.editLonLat(this.clickPoint)
			}

			this.flagSend(false)
			}

			@@ -131,27 +235,53 @@

			@Emit('sendLonLat')
			private sendLonLat(lonLat: any) {
			console.log(lonLat,'jia');
			return lonLat;
			}

			@Emit('editLonLat')
			private editLonLat(lonLat: any) {
			console.log(lonLat,'gai');
			return lonLat;
			}
			}
			</script>

			<style lang="less">

			.modalStyle{
			.ant-modal{
			<style lang="less" scoped>
			.modalStyle {
			.ant-modal {
			margin-left: 25%;
			}
			.ant-modal-content{
			width: 800px;
			.ant-modal-content {
			width: 800px;
			}
			}
			.BMap_cpyCtrl,.anchorBL {
			.BMap_cpyCtrl,
			.anchorBL {
			display: none;
			}
			/* 去除高德地图的logo */
			/deep/.amap-logo {
			display: none;
			opacity: 0 !important;
			}
			/deep/.amap-copyright {
			opacity: 0;
			}
			.amap-sug-result {
			position: absolute;
			z-index: 9999 !important;
			background-color: #fefefe;
			border: 1px solid #d1d1d1;
			bottom: auto;
			}
			#panel {
			z-index: 999;
			position: absolute;
			background-color: white;
			max-height: 100%;
			overflow-y: auto;
			right: 0;
			width: 280px;
			}
			</style>