vue3百度地图的点点击事件弹出自定义组件当弹窗

百度地图上面有自定义的点事件,但是呢很不方便,就只能显示自己写的html固定的,泰拉跨辣!!!

百度地图api是这么搞的:

var opts = {
    width: 200,
    height: 100,
    title: '故宫博物院'
};
var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point); // 开启信息窗口
});

运行出来是这样的:

 需求是点击点标记弹出弹窗,里面有视频啊图像啊之类的,所以这api上面就不可行,怎么办呢?

自己写一个组件,点击的时候就弹出来我写的组件,想写啥就直接塞进去,多方便啊,我是这样写的:

父页面:

<!-- 地图 -->
		<div style="height: 100%" id="allmap">
		</div>
		<editDialog ref="editDialogRef" :TipTitle="TipTitle"/>

引入子组件(别在意我子组件叫啥哈哈哈哈):

import editDialog from '/@/views/visualizing/editDialog.vue';

对ref的值设置:

const editDialogRef = ref()

触发的click函数:

const openeditDialog = () => {
	editDialogRef.value.openDialog(mac.value);
};

在百度地图上触发click事件:

marker1.addEventListener('click', function () {
			openeditDialog()
		})

自定义组件的内容(项目不能对外,我就把子组件的内容换成了一个div,如果有报错,就直接把报错的地方删了就行,并不影响) :

<template>
	<div class="tbwea-container">
		<el-dialog v-model="isShowDialog" :width="500" draggable="" :title='TipTitle'>
			<div>我是子组件</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted,reactive } from "vue";
import type { FormRules } from "element-plus";
import { pageTbImageinfo } from '/@/api/main/tbImageinfo';
import { useRouter } from 'vue-router';
const router = useRouter()
function tbimageinfo() {
	router.push({ path: '/Img/tbimageinfo', query: { mid: "sp0006" }})
}
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
const getpictureWebURL = ref();
const TipTitle = ref()
//自行添加其他规则
const rules = ref<FormRules>({
});
const queryParams = ref<any>({});
const state = reactive({
	loading: false,
	
	
	queryParams: {
		mid: '',
		account: undefined,
		realName: undefined,
		phone: undefined,
	},
	tableParams: {
		page: ref(1),
		pageSize: ref(10),
		total: 0 as any,
	},
	editUserTitle: '',
});
// 打开弹窗
const openDialog = (row: any) => {
	ruleForm.value = JSON.parse(JSON.stringify(row));
	isShowDialog.value = true;
	queryParams.value = ruleForm.value.mid
	TipTitle.value = ruleForm.value.name
	pageTbImageinfo({mid:(Object.assign(queryParams.value))}).then(res => {
	const data = res.data.result.items
	for (let i = 0; i < data.length; i++) {
		const element = data[i];
		getpictureWebURL.value = element.pictureWebURL;
	}
})
};

// 关闭弹窗
const closeDialog = () => {
	isShowDialog.value = false;
};
// 取消
const cancel = () => {
	isShowDialog.value = false;
};
// 页面加载时
onMounted(async () => {

});
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>