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(); // 启用滚轮放大缩小
	const point = new BMap.Point(longitude.value,latitude.value); // 创建点坐标
 	map.centerAndZoom(point, 16);
  	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
	const points = new BMap.Point(117.14372945240574,35.92808471455389); // 创建点坐标
 	map.centerAndZoom(points, 16);
  	var markerd = new BMap.Marker(points);
	map.addOverlay(markerd);
  	
}

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>