标记（Mapbox）反应打字稿答案

【问题标题】：Marker(Mapbox) React typescript标记（Mapbox）反应打字稿
【发布时间】：2021-05-24 20:03:05
【问题描述】：

我想将 id 添加到 Marker()，但它显示错误 Property '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
    });
  }, []);

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

【问题讨论】：

标签： reactjs typescript mapbox-gl-js

【解决方案1】：

您可以定义自己的类型来扩展地图框标记类型并添加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;

其余的应该没问题！

【讨论】：

感谢您的帮助。它可以正常工作。

【解决方案2】：

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


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

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

【讨论】：

感谢您的回答。很高兴知道另一种解决方案。很高兴向您学习。