fix(marker): 修复报错

src/marker/config.ts

@@ -3,16 +3,18 @@ import { toLngLat } from '../utils/toLngLat';
 import type { PropKey } from './types';
 
 /** 静态属性 */
-export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
+export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color', 'scale'];
 
 /** 动态属性 */
 export const NativeDynamicProps: PropKey[] = [
-  'draggable',
   'offset',
+  'draggable',
   'rotation',
   'rotationAlignment',
   'pitchAlignment',
-  'scale',
+  'occludedOpacity',
+
+  /** 自定义 */
   'lngLat',
 ];
 

src/marker/marker.tsx

@@ -1,14 +1,13 @@
 import Mapbox from 'mapbox-gl';
 import { useGetState, usePortal } from '@pansy/react-hooks';
 import { forwardRef, useEffect, useImperativeHandle } from 'react';
-import { useMap } from '@/hooks/useMap';
-import { useReact } from '@/hooks/useReact';
+import { useMap } from '../hooks/useMap';
+import { useReact } from '../hooks/useReact';
 import { useEvents } from '../hooks/useEvents';
 import { allProps, setterMap, converterMap } from './config';
 import { MarkerEventMap, MarkerEventList } from './constant';
 
-import type { Marker as MapboxMarker, MarkerOptions } from 'mapbox-gl';
-import type { MarkerProps, EventMapping, PropKey } from './types';
+import type { MarkerProps, EventMapping, PropKey, MapboxMarker, MarkerOptions } from './types';
 
 export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
   const { map } = useMap();
@@ -57,14 +56,18 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
         onInstanceCreated();
       });
     }
+
+    return () => {
+      container && container.removeEventListener('click', handleClick);
+    };
   }, [map]);
 
   const createInstance = () => {
     const options = getCreateOptions(props);
 
-    if (options.lnglat) {
+    if (options.lngLat) {
       const marker = new Mapbox.Marker(container, options);
-      marker.setLngLat(options.lnglat);
+      marker.setLngLat(options.lngLat);
 
       return Promise.resolve(marker);
     } else {
@@ -75,7 +78,7 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
   /** 获取创建参数 */
   const getCreateOptions = (props: MarkerProps) => {
     const options: MarkerOptions & {
-      lnglat?: MarkerProps['lngLat'];
+      lngLat?: MarkerProps['lngLat'];
     } = {};
 
     allProps.forEach((key) => {

src/marker/types.ts

@@ -3,6 +3,7 @@ import type { Marker, MarkerOptions, LngLatLike } from 'mapbox-gl';
 import type { KeysOfUnion } from '../types';
 
 export type { KeysOfUnion } from '../types';
+export type { Marker as MapboxMarker, MarkerOptions } from 'mapbox-gl';
 
 export interface MarkerEvent<TOrig = undefined> {
   type: string;
@@ -16,7 +17,7 @@ export interface MarkerEvents {
   onDragEnd: (e: MarkerEvent<MouseEvent | TouchEvent | undefined>) => void;
 }
 
-export interface CustomizeMarkerEvents {
+export interface CustomizeEvents {
   onClick: (e: MarkerEvent<Event | undefined>) => void;
 }
 
@@ -25,7 +26,7 @@ export type EventMapping = { [T in keyof MarkerEvents]: string };
 export interface MarkerProps
   extends MarkerOptions,
     Partial<MarkerEvents>,
-    Partial<CustomizeMarkerEvents> {
+    Partial<CustomizeEvents> {
   className?: string;
   /** 经纬度坐标 */
   lngLat?: LngLatLike;

stories/Marker.stories.tsx

@@ -28,5 +28,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Event: Story = {
-  args: {},
+  args: {
+    onClick: (e) => {
+      console.log(e);
+    },
+  },
 };