请用 js代码实现 如何监测访问者所在国家 并将页面内部的国旗图标显示成对应国家

这个问题的解决涉及到两个子问题：

1. 如何监测访问者所在国家
2. 如何将页面内部的国旗图标显示成对应国家

下面是一个简单的实现：

1. 监测访问者所在国家

我们可以使用浏览器提供的 `navigator` 对象来获取用户的语言和地区信息。其中，`navigator.language` 返回用户的语言设置，如 "en-US"；`navigator.geolocation` 返回用户的地理位置信息，如经纬度。

由于经纬度并不能直接对应到国家，我们需要使用第三方的 API 转换成对应的国家信息。这里我们使用了 [IP2Location](https://www.ip2location.com/) 提供的 API。

// 获取用户语言设置
const userLanguage = navigator.language;

// 获取用户地理位置信息，并转换成对应的国家信息
navigator.geolocation.getCurrentPosition(async (position) => {
  const { latitude, longitude } = position.coords;
  const url = `https://api.ip2location.com/v2.1/lookup/${latitude},${longitude}?key=demo&package=WS6`;
  const response = await fetch(url);
  const data = await response.json();
  const userCountry = data.country_name;
  // 将国家信息存储到 localStorage 中
  localStorage.setItem('userCountry', userCountry);
});

2. 将页面内部的国旗图标显示成对应国家

我们可以通过在 HTML 中引入对应国家的国旗图标，然后根据用户所在的国家信息，动态地修改对应的图标的显示。

<img src="flags/china.svg" alt="China" id="flag">

// 获取用户国家信息
const userCountry = localStorage.getItem('userCountry');

// 修改国旗图标的显示
const flagImg = document.getElementById('flag');
flagImg.src = `flags/${userCountry.toLowerCase()}.svg`;
flagImg.alt = userCountry;