标记（Mapbox）反应打字稿

Question

我想将 id 添加到 Marker()，但它显示错误属性 'id' does not exist on type '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
    });
  }, []);

我是打字稿的新手，所以我很乐意获得提示和解决方案。谢谢。

Answer 1

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

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

您的 markers ref 是这些对象的字典。

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

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

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

其他应该没问题！

Answer 2

您还可以在 getElement() 方法中设置它，其中 returns DOM 元素用作标记。默认为浅蓝色、水滴形 SVG 标记。


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

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

标记（Mapbox）反应打字稿

Marker(Mapbox) React typescript

typescript

reactjs

mapbox-gl-js