Question

标记（Mapbox）React typescript

2021-05-24

981

reactjs typescript mapbox-gl-js

我想将 id 添加到 Marker()，但它显示错误属性“id”在类型“Marker”上不存在。

有没有办法将 id 添加到不存在的属性？

这是我的代码....

const maps = useRef<mapboxgl.Map | null>(null);

const markers = useRef<any>({}); // for the moment is any


useEffect(() => {
    maps.current?.on('click', (ev: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
      const { lng, lat } = ev.lngLat;

      const marker = new mapboxgl.Marker();
      marker.id = uuidV4(); // id' does not exist on type 'Marker

      marker.setLngLat([lng, lat]).addTo(maps.current!).setDraggable(true);

      markers.current[marker.id] = marker; // id' does not exist on type 'Marker
    });
  }, []);

我是 typescript 的新手，因此，我很乐意获得提示和解决方案。谢谢。

Answer 1

您可以定义自己的类型，扩展 mapbox 标记类型并添加 id 属性。

type MarkerWithId = mapboxgl.Marker & {id: string}

您的 markers 引用是这些对象的字典。

const markers = useRef<Record<string, MarkerWithId>>({});

当您调用 new mapboxgl.Marker() 时，您会得到一个没有 id 的标记，因此您需要使用类型断言。

const marker = new mapboxgl.Marker() as MarkerWithId;

其余的应该没问题！

Answer 2

您还可以在 getElement() 方法上设置它，该方法返回要用作标记的 DOM 元素。默认值为浅蓝色、水滴状 SVG 标记。

marker.getElement().id = uuidV4();

 marker.setLngLat([lng, lat]).addTo(map.current!).setDraggable(true);
 
 markers.current[marker.getElement().id] = marker;