在地图重新加载上删除和添加地图控件

Question

我正在制作一个网络地图，该地图允许用户通过单击按钮在两个数据表达式之间进行选择。该按钮将重新加载页面，以成功连接到其他javascript文件。但是，每次重新加载页面时，都会添加其他序列和覆盖控件。我正在寻找一种方法，每次重新加载页面时都删除控件，以便仅显示一组控件。

在main.js中创建序列控件：

  //create range input element (slider)
  $('#panel').append('<input class="range-slider" type="range">');

  // Create skip buttons
  $('#panel').append('<button class="skip" id="reverse">Reverse</button>');
  $('#panel').append('<button class="skip" id="forward">Skip</button>');

在index.html中重新加载页面：

<script type="text/javascript">
    let changeExpression = function(type) {
        let elem = document.createElement("script");
    if (type === 'heat') {
        elem.src = "js/main_heat.js";
    } else {
        elem.src = "js/main.js";
    }
    map.off();
    map.remove();
    document.body.appendChild(elem);
    }
</script>

我已经尝试过“ range-slider” .remove（），但是这会删除整个地图并抛出错误，表明它是无效的函数。有人知道实现此目的的方法吗？

Answer 1

修改了一段时间后，我找到了解决方法。我没有将序列控件附加到面板上，而是使用L.control.extend将它们添加到地图容器中，该地图容器在每次刷新页面时都会重新加载它们。