javascript - 如何将 Mapbox Geocoder 结果地点/国家/地区文本名称获取到 JavaScript 函数中？

Question

当 Mapbox 地理编码器返回搜索结果时，我需要获取城市(地名)和国家名称文本并将它们放入网页的文本字段中。

这会将数据返回到控制台。

<script>
geocoder.on('results', function(results) {
   console.log(results);
})
</script>

纽约的地理编码器搜索返回此 GeoJSON 对象数据。我需要在返回搜索结果时获取国家/地区文本数据，并使用国家/地区名称文本更新网页上的文本字段。

<script>
features: Array(5)
0:
bbox: (4) [-74.2590879797556, 40.477399, -73.7008392055224, 40.917576401307]
center: (2) [-73.9808, 40.7648]
context: Array(2)
0: {id: "region.14044236392855570", short_code: "US-NY", wikidata: "Q1384", text_en-GB: "New York", language_en-GB: "en", …}
1:
id: "country.9053006287256050"
language: "en"
language_en-GB: "en"
short_code: "us"
text: "United States of America"
text_en-GB: "United States of America"
wikidata: "Q30"
__proto__: Object
length: 2
__proto__: Array(0)
geometry: {type: "Point", coordinates: Array(2)}
id: "place.15278078705964500"
language: "en"
language_en-GB: "en"
matching_place_name: "New York, New York, United States of America"
matching_text: "New York"
place_name: "New York City, New York, United States of America"
place_name_en-GB: "New York City, New York, United States of America"
place_type: ["place"]
properties: {wikidata: "Q60"}
relevance: 1
text: "New York City"
text_en-GB: "New York City"
type: "Feature"
__proto__: Object
</script>

下面的代码更新文本字段。但是，与上述数据不同的是实际数据。如何在每次搜索后查询/访问实际结果数据以更新文本字段？

<script>
//listen for a search result
document.querySelector('.mapboxgl-ctrl-geocoder--input').addEventListener('change', titleTest);

function titleTest() {

var countryName = {
  id: "country.9053006287256050",
  language: "en",
  language_enGB: "en",
  short_code: "us",
  text: "United States of America",
  text_enGB: "United States of America",
  wikidata: "Q30"
}

  //update the input field
document.getElementById('titleinput').value = countryName.text.toUpperCase(); 
  //add to map
document.getElementById("map_title").innerHTML = countryName.text.toUpperCase();

</script>

下面一行返回“place_name: "New York City, New York, United States of America"”的值

<script>
 let str = document.querySelector('.mapboxgl-ctrl-geocoder--input').value;
</script>

让我们在下面的脚本中尝试一下..

<script>
// listen for a search
document.querySelector('.mapboxgl-ctrl-geocoder--input').addEventListener('change', updateTitle);

function updateTitle() {

 //get the text value for place
 let str = document.querySelector('.mapboxgl-ctrl-geocoder--input').value;

 //split the string
 let countryName = str.split(", ");

 //loop over array items  
 for(var i = 0; i < countryName.length; i++)
{
   console.log(countryName[i]);
}

  //update the input field
  document.getElementById('titleinput').value = countryName[1].toUpperCase();
 //add to map
  document.getElementById("map_title").innerHTML = countryName[1].toUpperCase();
</script>

上面的代码为我提供了 mapbox 建议 [place_name] 作为字符串(“纽约市，纽约，美利坚合众国”)，然后我将其拆分为一个列表，并进行迭代。它适用于地方/城市，因为这个数组位置总是第一个 [0]。但是，它不能很好地获取国家名称，因为国家名称并不总是在字符串或列表中的相同位置。例如，如果我将 countryName 数组值设置为 [1] 并搜索“London”，则第二项是“Greater London”，“England”是 [2]，“United Kingdom”是 [3]，而如果我搜索“巴黎”，[1] 给我“法国”。

我需要在地理编码器返回结果时获取国家/地区名称文本，以便将其添加到文本字段中。如何在每次搜索结果后从对象中获取国家名称文本？有人知道吗？

Answer 1

  geocoder.on("result", (e) => {
    function getAddressByType(value, index, array) {
      if (value.id.match(/country.*/)) {
       console.log(value.text)
      } else if (value.id.match(/region.*/)) {
       console.log(value.text)
      } else if (value.id.match(/postcode.*/)) {
       console.log(value.text)
      } else if (value.id.match(/district.*/)) {
       console.log(value.text)
      } else if (value.id.match(/place.*/)) {
          console.log(value.text)
      } else if (value.id.match(/neighborhood.*/)) {
            console.log(value.text)
      } else if (value.id.match(/address.*/)) {
            console.log(value.text)
      } else if (value.id.match(/poi.*/)) {
       console.log(value.text)
      }
    }
    e.result.context.forEach(getAddressByType);
    console.log(JSON.stringify(e))
  });

注意:“结果”和“结果”返回不同的数据。这就是我在“结果”函数的上下文中获取所有数据的方式。我循环 e.result.context 然后使用一个函数来访问对象以确保我可以使用该数组上的所有对象返回。