Leaflet.js地图开发问题：切换国家重复生成EasyButton未移除

问题根源在于每次选择国家时，你都会创建新的EasyButton并添加到地图上，但没有移除之前生成的按钮，导致按钮不断累积。下面提供两种解决方案：

方案一：移除旧按钮后再创建新按钮 #

通过在外部作用域保存按钮的引用，每次点击国家时先移除已存在的按钮，再生成新的按钮：

// 在generateList函数外部声明按钮变量，确保跨点击事件可访问
let weatherButton, currencyButton, detailsButton;

function generateList() {
    const list = document.querySelector('.dropdown-content');
    
    countryList.sort(function (a, b) {
      if (a.properties.country < b.properties.country) {
        return -1;
      }
      if (a.properties.country > b.properties.country) {
        return 1;
      }
      return 0;
    });
    
    countryList.forEach((country) => {
      const a = document.createElement('a');
      const p = document.createElement('p');
      
      a.addEventListener('click', () => {
          flyToStore(country);
          const city = country.properties.city;
          const currency1 = country.properties.currency;
          const countryName = country.properties.country; // 修正拼写错误
          
          // 移除已存在的按钮
          if (weatherButton) myMap.removeControl(weatherButton);
          if (currencyButton) myMap.removeControl(currencyButton);
          if (detailsButton) myMap.removeControl(detailsButton);
          
          // 创建新按钮并保存引用
          weatherButton = L.easyButton('fa-solid fa-cloud fa-lg', function (){
            weatherdetails(city);
            $('#weathermodal').modal('show');
          }).addTo(myMap);
          
          currencyButton = L.easyButton('fa fa-dollar fa-lg', function (){
            currencyexchange(currency1);
            $('#myModal').modal('show');
          }).addTo(myMap);
          
          detailsButton = L.easyButton('fa fa-info-circle fa-lg', function (){
            moredetails(countryName);
            $('#detailsmodal').modal('show');
          }).addTo(myMap);
      });
      
      a.classList.add('country-item');
      a.innerText = country.properties.country;
      
      p.appendChild(a);
      list.appendChild(p);
    });
}

方案二：复用现有按钮（更高效） #

只创建一次按钮，通过更新共享变量来改变按钮的功能逻辑，避免重复创建控件：

// 在全局或更高作用域声明共享变量
let currentCity, currentCurrency, currentCountryName;

// 初始化时创建一次按钮
const weatherButton = L.easyButton('fa-solid fa-cloud fa-lg', function (){
  weatherdetails(currentCity);
  $('#weathermodal').modal('show');
}).addTo(myMap);

const currencyButton = L.easyButton('fa fa-dollar fa-lg', function (){
  currencyexchange(currentCurrency);
  $('#myModal').modal('show');
}).addTo(myMap);

const detailsButton = L.easyButton('fa fa-info-circle fa-lg', function (){
  moredetails(currentCountryName);
  $('#detailsmodal').modal('show');
}).addTo(myMap);

function generateList() {
    const list = document.querySelector('.dropdown-content');
    
    countryList.sort(function (a, b) {
      if (a.properties.country < b.properties.country) {
        return -1;
      }
      if (a.properties.country > b.properties.country) {
        return 1;
      }
      return 0;
    });
    
    countryList.forEach((country) => {
      const a = document.createElement('a');
      const p = document.createElement('p');
      
      a.addEventListener('click', () => {
          flyToStore(country);
          // 更新共享变量即可，无需重新创建按钮
          currentCity = country.properties.city;
          currentCurrency = country.properties.currency;
          currentCountryName = country.properties.country;
      });
      
      a.classList.add('country-item');
      a.innerText = country.properties.country;
      
      p.appendChild(a);
      list.appendChild(p);
    });
}

说明：方案二更推荐，因为它避免了频繁创建和销毁控件的开销，代码也更简洁。同时修正了原代码中contry的拼写错误为countryName（避免与循环变量country冲突）。

内容的提问来源于stack exchange，提问作者Faraz Anwar