订阅事件的 mapbox-gl 方向问题

编程问答 2022-09-01

问题描述

我在订阅路线插件中发生的事件“路线”时遇到问题。 directions.on("route",...

我找不到有关取消订阅事件的信息。我怎么能关闭这个事件，因为当我在我的应用程序中进入另一个使用地图的组件时，该事件会在未安装的组件上触发并且我收到警告。 当我不使用它时：
if(directions.actions.eventSubscribe().events.route) return; 然后每次安装组件时都会订阅新事件并触发越来越多的次数。

警告：无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。 在 CreateNewRoute (http://localhost:3001/static/js/main.chunk.js:526:91)

useEffect(() => {
if (map.current) return; // initialize map only once
map.current = new mapboxgl.Map({
  container: mapContainer.current,style: "mapbox://styles/karcio/ckr3m2igg5uin18p3iolzcdmp",center: [lng,lat],zoom: zoom,});
map.current.addControl(new mapboxgl.FullscreenControl(),"bottom-left");
map.current.addControl(nav,"bottom-left");
map.current.addControl(directions,"top-left");

if (directions.actions.eventSubscribe().events.route) return;
directions.on("route",(object) => {
  const originCoordinates = directions.getOrigin().geometry.coordinates;
  const destinationCoordinates =
    directions.getDestination().geometry.coordinates;

  const bbox = [originCoordinates,destinationCoordinates];
  map.current.fitBounds(bbox,{
    padding: 200,});

  map.current.once("idle",() => {
    props.setRouteData((previousState) => {
      return {
        ...previousState,img: map.current.getCanvas().toDataURL(),};
    });
  });

  props.setRouteData((previousState) => {
    return {
      ...previousState,distance: object.route[0].distance,duration: object.route[0].duration,origin: originCoordinates,destination: destinationCoordinates,};
  });
});

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

directionseventsmapboxmapbox-glreactjsreactjs