在地图重新加载时删除和附加地图控件答案

【问题标题】：Removing and Appending Map Controls on Map Reload在地图重新加载时删除和附加地图控件
【发布时间】：2019-05-09 19:20:44
【问题描述】：

我正在开发一个 web 地图，它允许用户通过单击一个按钮在两种数据表达式之间进行选择。该按钮重新加载页面以成功连接到不同的 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()，但这会删除整个地图并引发错误，指出它是无效函数。有谁知道实现这一点的方法吗？

【问题讨论】：

标签： javascript overlay reload

【解决方案1】：

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

【讨论】：