在Mapbox中搜索國家

Question

我有一個國家/地區列表，我試圖將地圖居中並調整縮放級別以在地圖上顯示整個國家。

使用地理編碼API https://api.mapbox.com/geocoding/v5/{dataset}/{query}.json?country={cc}&access_token=<your access token>，我可以得到一些座標不在國家中心，但至少得到相關座標，但是返回的對象不包含關於縮放的任何信息水平。

<select id="country" name="country"> 
    <option value="at">Austria</option> 
    <option value="cy">Cyprus</option> 
    <option value="de">Germany</option> 
    <option value="pt">Portugal</option> 
    <option value="es">Spain</option> 
</select> 

<div class="map" id="map"></div> 

<script> 

mapboxgl.accessToken = 'the_access_token'; 
var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location 
    center: [-74.50, 40], // random starting position 
    zoom: 9 // starting zoom level 
}); 

// Find country 
$('#country').on('change', function (e) { 
    countrycode = $(this).val(); 
    country = $(this).find('option:selected').text(); 
    console.log(countrycode, country); 
    $.ajax({ 
     url: "https://api.mapbox.com/geocoding/v5/mapbox.places/"+country+".json?country="+countrycode+"&access_token="+mapboxgl.accessToken, 
     success: function(res) { 
      console.log(res); 
      map.easeTo({ 
       center: res.features[0].center, 
       // zoom: 
      }); 
     } 
    }); 
}); 

</script> 

我錯過了什麼？我應該使用不同的API嗎？或者我正在尋找不支持的東西？

Answer 1

什麼也響應中返回一個邊框，您可以傳遞給map.fitBounds精確座標+變焦：

var bbox = res.features[0].bbox; 
map.fitBounds([ 
    [bbox[0], bbox[1]], 
    [bbox[2], bbox[3]] 
]);