feat: 更新组件事件绑定

src/App.vue

@@ -4,15 +4,10 @@
 		mapType="BMAP_NORMAL_MAP"
 		:enable-keyboard="false"
 		:zoom="zoom"
-		@initd="ready1"
 		enableDragging
 		:minZoom="10"
-		@dblclick="handleClick"
 	>
-		<!-- <BmControl
-			style="display: flex; background-color: #f90; padding: 10px"
-			:offset="{ x: 0, y: 0 }"
-		>
+		<BmControl style="display: flex; background-color: #f90; padding: 10px" :offset="{ x: 0, y: 0 }">
 			<button @click="handleZoomOut">缩小1</button>
 			<button @click="handleZoomIn">放大fasdf</button>
 		</BmControl>
@@ -56,22 +51,11 @@
 			}"
 			:radius="300"
 			editing
-		/> -->
-		<!-- <BmPolyline
-			:path="polylinePath"
-			stroke-color="#f90"
-			:stroke-opacity="1"
-			:stroke-weight="10"
-		></BmPolyline> -->
-		<!-- <BmPolygon
-			:path="polylinePath"
-			stroke-color="#f90"
-			:stroke-opacity="1"
-			:stroke-weight="10"
-			editing
-		></BmPolygon> -->
-		<!-- <BmScale @initd="ready" v-if="show"></BmScale>
-		<BmZoom v-if="show"></BmZoom> -->
+		/>
+		<BmPolyline :path="polylinePath" stroke-color="#f90" :stroke-opacity="1" :stroke-weight="10" editing></BmPolyline>
+		<BmPolygon :path="polylinePath" stroke-color="#f90" :stroke-opacity="1" :stroke-weight="10" editing></BmPolygon>
+		<BmScale v-if="show"></BmScale>
+		<BmZoom v-if="show"></BmZoom>
 	</baidu-map>
 </template>
 <script setup lang="ts">

src/components/baidu-map/index.vue

@@ -1,10 +1,5 @@
 <template>
-	{{ $attrs }}
-	<div
-		id="baidu-map-container"
-		style="overflow: hidden"
-		:style="{ width: props.width, height: props.height }"
-	/>
+	<div id="baidu-map-container" style="overflow: hidden" :style="{ width: props.width, height: props.height }" />
 
 	<slot></slot>
 </template>
@@ -15,18 +10,9 @@
 	}
 </script>
 <script setup lang="ts">
-	import {
-		inject,
-		defineProps,
-		withDefaults,
-		defineEmits,
-		watch,
-		onMounted,
-		onUnmounted,
-		getCurrentInstance
-	} from 'vue'
+	import { inject, defineProps, withDefaults, defineEmits, watch, onMounted, onUnmounted } from 'vue'
 	import useLife from '../../hooks/useLife'
-	import { Callback } from '../../utils/eventsList'
+	import { Callback, baseMap } from '../../utils/eventsList'
 	import bindEvents from '../../utils/bindEvents'
 	export interface BaiduMapProps {
 		ak?: string
@@ -175,7 +161,7 @@
 		enablePinchToZoom: true,
 		enableAutoResize: true
 	})
-	const vueEmits = defineEmits(['initd', 'unload', 'click', 'dblclick', 'mousemove'])
+	const vueEmits = defineEmits([...baseMap])
 	const ak = props.ak || inject('baiduMapAk')
 	// 监听props变化
 	watch(() => props.zoom, setZoom)
@@ -350,5 +336,3 @@
 		map?.destroy()
 	})
 </script>
-
-<style lang="less" scoped></style>

src/components/control/bm-control/index.vue

@@ -29,16 +29,16 @@
 		offset: () => ({ x: 83, y: 18 })
 	})
 	defineEmits(['initd', 'unload'])
-	useBaseMapEffect((mapInstance: BMapGL.Map) => {
+	useBaseMapEffect((map: BMapGL.Map) => {
 		if (!controlContainer.value) return
 		const customControl = new window.BMapGL.Control()
 		customControl.defaultAnchor = window[props.anchor]
 		customControl.defaultOffset = new window.BMapGL.Size(props.offset!.x, props.offset!.y)
-		customControl.initialize = (map: BMapGL.Map) => {
-			return map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
+		customControl.initialize = (_map: BMapGL.Map) => {
+			return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
 		}
-		mapInstance.addControl(customControl)
-		ready(mapInstance)
-		return () => mapInstance.removeControl(customControl)
+		map.addControl(customControl)
+		ready(map)
+		return () => map.removeControl(customControl)
 	})
 </script>

src/components/control/bm-navigation3d/index.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 	import { defineProps, withDefaults, defineEmits } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+	import useLife from '../../../hooks/useLife'
 	export interface baseBmControlOptions {
 		/**
 		 * 控件的停靠位置
@@ -22,7 +23,7 @@
 		anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
 		offset: () => ({ x: 83, y: 18 })
 	})
-
+	const { ready } = useLife()
 	let navigation3dControl: BMapGL.NavigationControl3D
 	defineEmits(['initd', 'unload'])
 	useBaseMapEffect((map) => {
@@ -31,6 +32,7 @@
 			anchor: window[props.anchor]
 		})
 		map.addControl(navigation3dControl)
+		ready(map)
 		return () => map.removeControl(navigation3dControl)
 	})
 </script>

src/components/control/bm-zoom/index.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 	import { defineProps, withDefaults, defineEmits } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+	import useLife from '../../../hooks/useLife'
 	export interface baseBmControlOptions {
 		/**
 		 * 控件的停靠位置
@@ -22,6 +23,7 @@
 		anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
 		offset: () => ({ x: 83, y: 18 })
 	})
+	const { ready } = useLife()
 	let zoomControl: BMapGL.ZoomControl
 	defineEmits(['initd', 'unload'])
 	useBaseMapEffect((map) => {
@@ -30,6 +32,7 @@
 			anchor: window[props.anchor]
 		})
 		map.addControl(zoomControl)
+		ready(map)
 		return () => map.removeControl(zoomControl)
 	})
 </script>

src/components/overlay/bm-circle/index.vue

@@ -4,6 +4,8 @@
 <script setup lang="ts">
 	import { defineProps, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+	import bindEvents, { Callback } from '../../../utils/bindEvents'
+	import useLife from '../../..//hooks/useLife'
 	export interface BmCircleProps {
 		/**
 		 * 折线的节点坐标数组
@@ -64,6 +66,14 @@
 		 * 是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true
 		 */
 		clip?: boolean
+		onClick?: Callback
+		onDblclick?: Callback
+		onMousedown?: Callback
+		onMouseup?: Callback
+		onMouseout?: Callback
+		onMouseover?: Callback
+		onRemove?: Callback
+		onLineupdate?: Callback
 	}
 	const props = withDefaults(defineProps<BmCircleProps>(), {
 		strokeColor: '#000',
@@ -76,7 +86,19 @@
 		geodesic: false,
 		clip: true
 	})
-
+	const vueEmits = defineEmits([
+		'initd',
+		'unload',
+		'click',
+		'dblclick',
+		'mousedown',
+		'mouseup',
+		'mouseout',
+		'mouseover',
+		'remove',
+		'lineupdate'
+	])
+	const { ready } = useLife()
 	useBaseMapEffect((map: BMapGL.Map) => {
 		const {
 			center,
@@ -104,6 +126,8 @@
 			clip
 		})
 		map.addOverlay(circle)
+		ready(map)
+		bindEvents(props, vueEmits, circle)
 		return () => {
 			map.removeOverlay(circle)
 		}

src/components/overlay/bm-label/index.vue

@@ -2,7 +2,9 @@
 <script setup lang="ts">
 	import { defineProps, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  // TODO: 完善组件的属性动态监听设置
+	import bindEvents, { Callback } from '../../../utils/bindEvents'
+	import useLife from '../../..//hooks/useLife'
+	// TODO: 完善组件的属性动态监听设置
 	interface BmLabelProps {
 		/**
 		 * 文本标注信息
@@ -34,6 +36,14 @@
 		style?: {
 			[k in keyof CSSStyleDeclaration]?: any
 		}
+		onClick?: Callback
+		onDblclick?: Callback
+		onMousedown?: Callback
+		onMouseup?: Callback
+		onMouseout?: Callback
+		onMouseover?: Callback
+		onRemove?: Callback
+		onRightclick?: Callback
 	}
 	const props = withDefaults(defineProps<BmLabelProps>(), {
 		offset: () => ({
@@ -42,6 +52,19 @@
 		}),
 		massClear: true
 	})
+	const vueEmits = defineEmits([
+		'initd',
+		'unload',
+		'click',
+		'dblclick',
+		'mousedown',
+		'mouseup',
+		'mouseout',
+		'mouseover',
+		'remove',
+		'rightclick'
+	])
+	const { ready } = useLife()
 	let label: BMapGL.Label
 	useBaseMapEffect((map: BMapGL.Map) => {
 		const { content, position, offset, massClear, style } = props
@@ -56,6 +79,8 @@
 			label.setStyle(style)
 		}
 		map.addOverlay(label)
+		ready(map)
+		bindEvents(props, vueEmits, label)
 		// 在地图上添加点标记
 		return () => {
 			map.removeOverlay(label)

src/components/overlay/bm-marker/index.vue

@@ -6,6 +6,8 @@
 	import { defineProps, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
 	import { isString } from '../../../utils/index'
+	import bindEvents, { Callback } from '../../../utils/bindEvents'
+	import useLife from '../../..//hooks/useLife'
 	// TODO: 完善组件的属性动态监听设置
 	export interface BmMarkerProps {
 		position: {
@@ -78,6 +80,19 @@
 		 * 鼠标移到marker上的显示内容
 		 */
 		title?: string
+		onClick?: Callback
+		onDblclick?: Callback
+		onMousedown?: Callback
+		onMouseup?: Callback
+		onMouseout?: Callback
+		onMouseover?: Callback
+		onRemove?: Callback
+		onInfowindowclose?: Callback
+		onInfowindowopen?: Callback
+		onDragstart?: Callback
+		onDragging?: Callback
+		onDragend?: Callback
+		onRightclick?: Callback
 	}
 	const props = withDefaults(defineProps<BmMarkerProps>(), {
 		offset: () => ({
@@ -92,20 +107,28 @@
 		rotation: 0,
 		title: ''
 	})
+	const vueEmits = defineEmits([
+		'initd',
+		'unload',
+		'click',
+		'dblclick',
+		'mousedown',
+		'mouseup',
+		'mouseout',
+		'mouseover',
+		'remove',
+		'infowindowclose',
+		'infowindowopen',
+		'dragstart',
+		'dragging',
+		'dragend',
+		'rightclick'
+	])
+	const { ready } = useLife()
 	let marker: BMapGL.Marker
 	useBaseMapEffect((map: BMapGL.Map) => {
-		const {
-			position,
-			offset,
-			icon,
-			massClear,
-			dragging,
-			clicking,
-			raiseOnDrag,
-			draggingCursor,
-			rotation,
-			title
-		} = props
+		const { position, offset, icon, massClear, dragging, clicking, raiseOnDrag, draggingCursor, rotation, title } =
+			props
 		const options: BMapGL.MarkerOptions = {
 			offset: new BMapGL.Size(offset.x, offset.y),
 			enableMassClear: massClear,
@@ -134,16 +157,14 @@
 				if (printImageUrl) {
 					iconOptions.printImageUrl = printImageUrl
 				}
-				options.icon = new BMapGL.Icon(
-					imageUrl,
-					new BMapGL.Size(imageSize.width, imageSize.height),
-					iconOptions
-				)
+				options.icon = new BMapGL.Icon(imageUrl, new BMapGL.Size(imageSize.width, imageSize.height), iconOptions)
 			}
 		}
 		marker = new BMapGL.Marker(new BMapGL.Point(position.lng, position.lat), options)
 		// 在地图上添加点标记
 		map.addOverlay(marker)
+		ready(map)
+		bindEvents(props, vueEmits, marker)
 		return () => {
 			map.removeOverlay(marker)
 		}