Vue3 中使用 vue-baidu-map-3x bm-polygon 组件：点击事件获取 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属性方式需要确保百度地图内部未覆盖该属性名 ######[AI写代码神器 | 488点数解答 | 2025-07-25 15:33:09]