feat: marker绑定点击事件

pansyjs · Aug 31, 2022 · 1cbd812 · 1cbd812
1 parent 9f1283e
commit 1cbd812
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/src/map/demos/basic.tsx b/src/map/demos/basic.tsx
@@ -24,11 +24,21 @@ export default () => {
       <Map onClick={enable ? handleClick1 : handleClick2}>
         <Marker
           lngLat={[30.5, 50.5]}
+          onDragEnd={(e) => {
+            //@ts-ignore
+            console.log(e.target.getLngLat());
+          }}
+          onClick={(e) => {
+            //@ts-ignore
+            console.log(e.target.getLngLat());
+          }}
+          draggable={true}
+
           // render={() => {
           //   return <div style={{ background: 'red' }}>123</div>
           // }}
         >
-          <div style={{ background: 'red' }}>123</div>
+          <div style={{ background: 'red', borderRadius: '50%', padding: '3px' }}>123</div>
         </Marker>
       </Map>
     </div>

diff --git a/src/marker/config.ts b/src/marker/config.ts
@@ -11,7 +11,7 @@ export const mapEventMap: EventMapping = {
 };
 
 /** 静态属性 */
-export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color'];
+export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
 
 /** 动态属性 */
 export const NativeDynamicProps: PropKey[] = [

diff --git a/src/marker/marker.tsx b/src/marker/marker.tsx
@@ -43,7 +43,14 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
     contentWrapper.current = document.createElement('div');
 
     const marker = new MapboxMarker(contentWrapper.current, options);
-
+    marker.getElement().addEventListener('click', (e: MouseEvent) => {
+      //@ts-ignore
+      options.onClick?.({
+        type: 'click',
+        target: marker,
+        originalEvent: e,
+      });
+    });
     return Promise.resolve(marker);
   };
 

diff --git a/src/marker/types.ts b/src/marker/types.ts
@@ -14,6 +14,7 @@ export interface MarkerProps extends MarkerOptions, Partial<MarkerEvents> {
   className?: string;
   lngLat: LngLatLike;
   children: any;
+  onClick?: (e: MapEventType['click']) => void;
 }
 
 export type PropKey = KeysOfUnion<MarkerProps>;