moral_manage.git

			@@ -1,33 +1,62 @@
			<template>
			<a-modal
			title="坐标选择"
			destroyOnClose
			:visible="true"
			@ok="addLonAndLat"
			@cancel="handleMapCancel"
			okText="确定"
			class="modalStyle"
			>
			<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>
			<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" style="
			background-color: #1890ff;
			color: white;
			border: none;
			margin-left: 5px;
			">
			搜索
			</button>
			<div id="panel"></div>
			<!-- <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" id="amap">
			<el-amap-marker :position="clickPoint" animation="AMAP_ANIMATION_BOUNCE" :dragging="true"></el-amap-marker>
			</el-amap>

			<!-- :scroll-wheel-zoom="true"-->
			<baidu-map
			<!-- <baidu-map
			:center="center"
			:zoom="zoom"
			@ready="handler"
			@@ -48,7 +77,7 @@
			>
			</bm-marker>
			</bm-control>
			</baidu-map>
			</baidu-map> -->
			</div>
			</a-modal>
			</template>
			@@ -62,15 +91,17 @@
			} from 'vue-property-decorator';
			import any = jasmine.any;
			import { get, post } from "@/util/request";
			import $ from 'jquery'
			import func from 'vue-temp/vue-editor-bridge';


			@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: ''
			@@ -84,15 +115,19 @@
			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})
			@Watch('lnglat', { deep: true, immediate: true })
			private lnglatWatch(newVal: any, oldVal: any) {
			console.log('------------');
			console.log(newVal);
			@@ -100,32 +135,57 @@
			// this.center.lat = newVal.lat
			}
			private created() {

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

			private input: any = ''
			private mark: any = ''



			// 初始化地图
			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 searchAddress() {
			var map = new AMap.Map("amap", {
			resizeEnable: true
			});
			var placeSearch = new AMap.PlaceSearch({
			pageSize: 5, // 单页显示结果条数
			pageIndex: 1, // 页码
			city: "全国", // 兴趣点城市
			citylimit: false, //是否强制限制在设置的城市内搜索
			panel: "panel", // 结果列表将在此容器中进行展示。
			map: map, // 展现结果的地图实例
			autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
			});
			//关键字查询
			placeSearch.search(this.input)
			var salf = this
			var markerone = 0
			map.on('click', click);
			function click(e) {
			if (markerone === 1) {
			map.remove(map.Marker)
			}
			salf.mapClick(e)
			map.Marker = new AMap.Marker({
			map: map,
			position: salf.clickPoint,
			animation: "AMAP_ANIMATION_BOUNCE"
			})
			markerone = 1
			}
			}
			// 初始定位到星虹国际
			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
			// console.log(e);
			const { lng, lat } = e.lnglat
			this.clickPoint = [lng, lat]
			console.log(this.clickPoint);
			}

			private handleMapCancel() {
			@@ -135,11 +195,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)
			}

			@@ -150,27 +211,60 @@

			@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">
			<style lang="less" scoped>
			.modalStyle {
			.ant-modal {
			margin-left: 25%;
			}

			.ant-modal-content {
			width: 800px;
			}
			}

			.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;
			left: 25px;
			width: 280px;
			top: 126px;
			}
			</style>