酷代码 AI
菜单
服务商

vue3 vue-baidu-map-3x bm-polygon click事件 获取event就不能携带自己的参数么,如何做

在 Vue3 中使用 `vue-baidu-map-3x` 的 `bm-polygon` 组件时,可以通过闭包或自定义事件处理来同时获取原生事件和自定义参数。以下是解决方案: 方案1:使用闭包传递参数 ```vue <template> <baidu-map> <bm-polygon :path="polygonPath" @click="(e) => handlePolygonClick(e, customParam)" /> </baidu-map> </template> <script setup> const customParam = { id: 123 }; const handlePolygonClick = (event, param) => { console.log('百度地图事件对象:', event); console.log('自定义参数:', param); }; </script> ``` 方案2:通过data属性传递(推荐) ```vue <template> <baidu-map> <bm-polygon v-for="item in polygons" :key="item.id" :path="item.path" :data="item" <!-- 自定义数据绑定 --> @click="handlePolygonClick" /> </baidu-map> </template> <script setup> const handlePolygonClick = (event) => { const customData = event.target?.data; // 通过DOM属性获取 console.log('地图事件:', event); console.log('绑定数据:', customData); }; </script> ``` 方案3:使用自定义事件包装 ```vue <template> <baidu-map> <bm-polygon :path="polygonPath" @click="emitCustomEvent" /> </baidu-map> </template> <script setup> const emit = defineEmits(['polygon-click']); const emitCustomEvent = (event) => { emit('polygon-click', { originEvent: event, customData: { foo: 'bar' } }); }; </script> ``` 注意事项: 1. 百度地图的事件对象包含地理坐标信息,通过 `event.point` 获取经纬度 2. 动态生成的多边形需要确保 `v-for` 中每个元素有唯一 `key` 3. 方案2的DOM属性方式需要确保百度地图内部未覆盖该属性名 [2025-07-25 15:33:09 | AI写代码神器 | 488点数解答]

相关提问
请收藏新域名:pdcd.cn
发财导航,免费问AI
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]