初始化后修改Mapbox Geocoder的countries选项

问题场景 #

我正在使用MapboxGeocoder，已设置默认国家的countries选项，但希望用户切换搜索国家时，实时更新该选项，让搜索结果仅返回当前选中国家的内容。目前已完成Geocoder初始化（默认国家配置），并实现了harvest chosen插件的change事件，需要在事件中编写修改countries选项的代码。

当前代码：

// Add the control to the map.
const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  marker: false,
  countries: 'nz'
});

// Country selection changed
$('#country_id').on('change', function(evt, params) {
  // Check it's not empty
  if (params) {
    // code to go in here to change 'countries' option
  }
});

解决方案 #

MapboxGeocoder实例内置setQueryParams方法，可动态修改查询参数，包括countries选项。直接在change事件中调用该方法，传入选中国家的代码即可：

// Country selection changed
$('#country_id').on('change', function(evt, params) {
  // Check it's not empty
  if (params) {
    // 获取选中的国家ISO 3166-1 alpha-2代码（需确保下拉选项值为此格式）
    const selectedCountry = params.selected;
    // 更新countries参数
    geocoder.setQueryParams({ countries: selectedCountry });
  }
});

关键说明 #

• setQueryParams方法会保留原有参数，仅覆盖指定的countries选项，不影响其他配置。
• 需保证params.selected返回的是符合Mapbox要求的ISO 3166-1 alpha-2标准国家代码（如'cn'代表中国，'us'代表美国），若下拉选项值格式不符，需先做格式转换。
• 调用该方法后，后续的搜索请求会自动应用更新后的国家筛选规则。

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