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

<!--
@ 作者: 秦东
@ 时间: 2024-07-17 15:37:59
@ 备注: 地图视图
-->
<script lang='ts' setup>
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-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.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-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++
	}

}


onMounted(() =>{
	loadJScript()
})
</script>
<template>
	<div>
		<div id="pickMapView" :ref="mapId" class="openMapView"></div>
	</div>
</template>
<style  lang='scss' scoped>
.openMapView{
	width:100%;
	margin: 10px 0 0 0;
	height: calc(100vh - 320px);
}
</style>