ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/app/mapPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-07-17 15:37:59
@ 备注: 地图视图
-->
<script lang='ts' setup>

import { gainFormPageMapCont } from '@/api/DesignForm/requestapi'

import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'

const props = defineProps({
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	viewSetup:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	}
});
let mapId = "pickMapView"+ Math.ceil(Math.random());
const longitude= ref<number>(117.14272945140574)
const latitude= ref<number>(35.91808471435389)
/**
@ 作者: 秦东
@ 时间: 2024-07-25 13:24:25
@ 功能: 查询参数
*/
const searchQuery = reactive({
	// formId
})
const totalNum = ref(0)
const mapDataList = ref([]) // 表格行数据
/**
@ 作者: 秦东
@ 时间: 2024-07-19 14:55:24
@ 功能: 引入外部js
*/
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.LocationControl());
	map.addControl(new BMap.MapTypeControl());
	map.enableScrollWheelZoom(); // 启用滚轮放大缩小

	mapHandle(map)

	// const point = new BMap.Point(longitude.value,latitude.value); // 创建点坐标
 	// map.centerAndZoom(point, 16);
	// var label = new BMap.Label("山东恒信高科", {       // 创建文本标注
	// 	position: point,                          // 设置标注的地理位置
	// 	offset: new BMap.Size(10, 20)           // 设置标注的偏移量
	// }).addEventListener("click", function(){  
	// 	alert("您点击了标注");  
	// });

  	// // var marker = new BMap.Marker(point);
	// map.addOverlay(label);
	// const points = new BMap.Point(117.14372945240574,35.92808471455389); // 创建点坐标
 	// map.centerAndZoom(points, 16);
  	// var markerd = new BMap.Marker(points);
	// map.addOverlay(markerd);
  	
}
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1)
const lookPageInfoIsShow = ref(false)
const pageInfoCont = ref<any>()
const lookPageInfo = (val:any) => {
	tablePageClass.value = 4;
	pageInfoCont.value = val
	lookPageInfoIsShow.value = true;	
}
/**
@ 作者: 秦东
@ 时间: 2024-07-19 15:31:05
@ 功能: 处理地图时间
*/
const mapHandle = (map:any) => {
	let blz = []
	
	// for(var i = 1; i < 5;){
	// 	const points = new BMap.Point(117.14372945240574,35.92808471455389+i); // 创建点坐标
	// 	map.centerAndZoom(points, 16);
	// 	// var markerd = new BMap.Marker(points);
	// 	// map.addOverlay(markerd);
	// 	// let blz = "label"+i
	// 	blz[i] = new BMap.Label("山东恒信高科"+i, {       // 创建文本标注
	// 		position: points,                          // 设置标注的地理位置
	// 		offset: new BMap.Size(10, 20)           // 设置标注的偏移量
	// 	})
	// 	blz[i].addEventListener("click", function(){  
	// 		alert(i);  
	// 	});
	// 	map.addOverlay(blz[i]);
	// 	i++
	// }
	// console.log("设置标注的偏移量",mapDataList.value);
	mapDataList.value.forEach((item,index)=>{
		// console.log("设置标注的偏移量---->",item);
		const points = new BMap.Point(item._latitude,item._longitude); // 创建点坐标
		map.centerAndZoom(points, 16);
		blz[index] = new BMap.Label(item.input1721369489569, {       // 创建文本标注
			position: points,                          // 设置标注的地理位置
			offset: new BMap.Size(10, 20)           // 设置标注的偏移量
		})
		blz[index] .addEventListener("click", function(){  
			// alert(item.input1721369489569);  
			lookPageInfo(item)
		});
		map.addOverlay(blz[index]);
	})
}


/**
@ 作者: 秦东
@ 时间: 2024-07-25 13:23:33
@ 功能: 获取数据
*/
const gainMapLog = (val:any) => {
	val.viewClass = {
		class:"map"
	}
	// console.log(props.searchSend)
	gainFormPageMapCont(val)
		.then(({data})=>{
			totalNum.value = data.total
			// console.log("卡片获取数据--》",data)
			mapDataList.value = data.list
			loadJScript()
		})
}


onMounted(() =>{
	// gainMapLog(props.searchSend)
	
	nextTick(() =>{
		gainMapLog(props.searchSend)
	})
})

//翻页
const currentChange = (current: number) => {
	props.searchSend.page = current
    gainMapLog(props.searchSend)
}
</script>
<template>
	<div>
		<div id="pickMapView" :ref="mapId" class="openMapView"></div>
		<div class="mapPage">
			<el-pagination layout="prev, pager, next" :total="totalNum" @current-change="currentChange" />
		</div>
		<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @get-page-data="gainMapLog(props.searchSend)" />
	</div>
</template>
<style  lang='scss' scoped>
.openMapView{
	width:100%;
	margin: 10px 0 0 0;
	height: calc(100vh - 320px);
}
.mapPage{
	position: fixed;
	bottom: 4.5rem;
    right: 5rem;
	border-radius: .25rem;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
	z-index:999
}
</style>