appFormLowcode/src/components/lowCode/assistant/pickmap.vue

<!--
@ 作者: 秦东
@ 时间: 2023-12-08 10:14:09
@ 备注: 地图选择页面
-->
<template>
	<el-dialog
        v-model="isShow"
        width="100%"
        title="标注地址"
        append-to-body
		:before-close="closePickMap"
    >
		<el-row >
			<el-col class="dizhiBox" :span="24">
				<el-input v-model="addressinfo" placeholder="地址">
					<template #prepend>地址</template>
				</el-input>
			</el-col>
			<el-col class="dizhiBox" :span="24">
				<el-input v-model="lonVal" placeholder="经度">
					<template #prepend>经度</template>
				</el-input>
			</el-col>
			<el-col class="dizhiBox" :span="24">
				<el-input v-model="latVal" placeholder="纬度">
					<template #prepend>纬度</template>
				</el-input>
			</el-col>
			<el-col class="dizhiBoxBut" :span="24">
				<el-button type="primary" @click="pickMapCont">确定</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div id="pickMapView" :ref="mapId" class="openMapView"></div>
			</el-col>
		</el-row>
	</el-dialog>
</template>
<script lang='ts' setup>
const props = defineProps({
	mapshow:{
		type:Boolean,
		default:false
	},
	address:{
		type:String,
		default:"山东恒信高科能源有限公司生产A区"
	},
	lnglat:{
		type:String,
		default:"117.14272945140574,35.91808471435389"
	},
	lon:{
		type:Number,
		default:117.14272945140574
	},
	lat:{
		type:Number,
		default:35.91808471435389
	}
});
const emits = defineEmits(["update:mapshow","updatemapinfo"]);
const isShow = computed({
	get: () => props.mapshow,
	set: (val) => {
		emits("update:mapshow", val);
	},
});
const addressinfo = ref<string>(props.address)
const lonVal = ref<number>(props.lon)
const latVal = ref<number>(props.lat)
//关闭弹窗
const closePickMap = () =>{
	emits("update:mapshow", false);
	addressinfo.value = props.address
	lonVal.value = props.lon
	latVal.value = props.lat
}
let mapId = "pickMapView"+ Math.ceil(Math.random());
const loadJScript = () => {
	const script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF';
	script.onload = () => {
		mapInit()
	}
	document.body.appendChild(script);
}
//初始化地图
const mapInit = () => {
	const map = new window.BMap.Map("pickMapView"); // 创建Map实例
	var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}    
	map.addControl(new BMap.NavigationControl(opts));	//添加控件
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.MapTypeControl());
	map.enableScrollWheelZoom(); // 启用滚轮放大缩小
	const point = new BMap.Point(lonVal.value,latVal.value); // 创建点坐标
 	map.centerAndZoom(point, 16);
  	var marker = new BMap.Marker(point);
  	map.addOverlay(marker);
	var geoc = new BMap.Geocoder({extensions_street: true,extensions_streetNumber: true,extensions_town: true}); //获取信息详细程度
	//地图单击事件
	map.addEventListener('click', function (e) {
		var pt = e.point;
		lonVal.value = pt.lng
		latVal.value = pt.lat
		geoc.getLocation(pt, function(rs){
			// console.log("经纬度--->",pt,rs)
			map.clearOverlays()
			let markerNew = new BMap.Marker(new BMap.Point(rs.point.lng,rs.point.lat));
  			map.addOverlay(markerNew);
			if(rs.content.poi_desc != "" && rs.content.poi_desc != null){
				addressinfo.value= rs.addressComponents.province + rs.addressComponents.city + rs.addressComponents.district + rs.addressComponents.town + rs.content.poi_desc
			}else{
				addressinfo.value= rs.addressComponents.province + rs.addressComponents.city + rs.addressComponents.district + rs.addressComponents.town
			}
			
		})
	}); 
}
watch(() => props.mapshow,(val:boolean)=>{
	if(val){
		// mapInit()
	}
})

onMounted(() =>{
	if(props.lnglat != null && props.lnglat != ""){
		let lnogLate = props.lnglat.split(",");
		if(lnogLate.length >= 2){
			lonVal.value = lnogLate[0]
			latVal.value = lnogLate[lnogLate.length - 1]
		}
	}
	
	loadJScript()
})
//确定地址
const pickMapCont = () => {
	emits("updatemapinfo", addressinfo.value,lonVal.value,latVal.value);
	closePickMap();
}
</script>
<style  lang='scss' scoped>
.openMapView{
	width:100%;
	height:400px;
}
.dizhiBox{
	margin-bottom: 10px;
}
.dizhiBoxBut{
	text-align: right;
	margin-bottom: 5px;
}
</style>