因此传单定位（与大多数网络地图库一样）适用于纬度和经度。您在评论中引用的 API 将国家名称作为参数，并返回一些 COVID 数据。为了让您的地图做出适当响应，您需要对国家/地区名称进行地理编码。快速搜索找到了这个包含县名和国家中心latlng 的repo：https://github.com/eesur/country-codes-lat-long。
那里引用的json文件有以下格式的数据：
{
"country" : "Albania",
"alpha2" : "AL",
"alpha3" : "ALB",
"numeric" : 8,
"latitude" : 41,
"longitude" : 20
}
为简单起见，假设我们下载该文件，将其重命名为 .js，然后导入内容。现在您拥有所有可用的数据。
您的代码未显示您在哪里进行 API 调用以获取您的 COVID 数据。但是假设有一个函数你称之为状态变量selectedCountry。您可以拥有一个响应该状态变量的useEffect：
import countrycodes from './country-codes-lat-long-alpha3.js'
function App() {
const [selected, setSelected] = useState("")
const [center, setCenter] = useState([55, 122]) // some initial state
// Call this effect whenever selected changes
// (assuming the value of selected is an alpha3 3 character country code)
useEffect(() => {
if (selected){
fetch(`/v3/covid-19/countries/${selected}`)
.then(res => {
// do something with your response data
// set the map center to the lat lng defined by the reference json
const countryData = countrycodes.ref_country_codes.filter(country =>
country.alpha3 === selected
)[0]
const countryLatLng = {
lat: countryData.latitude,
lng: countryData.longitude,
}
setCenter(countryLatLng)
})
}
}, [selected])
return (
<div>
<Map center={center} />
<select onChange={() => setSelected(e.target.value}>
{a_bunch_of_country_options}
</select>
<div>
)
}
总而言之，您的<select> 元素将设置selected 状态变量。当selected 发生变化时，它会触发useEffect，它会调用你的api 并对数据做任何你想做的事情。当数据返回时，效果会检查参考数据以获取所选国家/地区的latlng。 setCenter 然后将状态变量 center 设置为传递给地图的 latlng。地图应通过调整其中心来做出响应。
这只是您如何实现目标的基本概述。我所写的主要问题是它只设置了地图的 center。可能您正在寻找的效果是设置地图视图以显示国家/地区。为此，您不仅需要该国家/地区的中心latlng，还需要所选国家/地区的整个LatLngBounds。获取这种数据并不是那么简单。查看 GIS 堆栈交换中的 this thread 获取该数据。
假设您能够获得一个数据源，该数据源可以根据国家/地区名称或 2/3 字母代码为您提供国家/地区的边界。例如：
[
{
"country" : "Albania",
"alpha2" : "AL",
"alpha3" : "ALB",
bounds: [ // made up
{
lat: 40.712,
lng: -74.227
},
{
lat: 42.712,
lng: -72.227
},
}
... // all the other countries
]
You can use the same method I described above, but instead of doing
```javascript
const [center, setCenter] = useState(initialCenter)
你会的
const [bounds, setBounds] = useState()
然后你可以在你的useEffect中设置MapContainer的bounds属性：
const [bounds, setBounds] = useState()
useEffect(() => {
if (selected){
fetch(`/v3/covid-19/countries/${selected}`)
.then(res => {
const countryData = countrycodes.ref_country_codes.filter(country =>
country.alpha3 === selected
)[0]
setBounds(country.bounds)
})
}
}, [selected])
return (
<div>
<Map center={someInitialCenter} bounds={bounds} />
...
<div>
)
这将产生这样的效果：一旦用户选择下拉菜单，地图就会适合国家/地区的边界，并且国家/地区在框架中。当然，您需要正确的数据源，而发现这本身就是一项超出您问题范围的任务。
总之，leaflet 或 react-leaflet 没有任何内置功能可以仅根据国家名称在地图上找到正确的坐标。您需要一种根据国家名称对国家坐标进行地理编码的方法，然后在地图中加以利用。希望这能让你开始。