1

我有一个国家列表，我正在尝试将地图居中并调整缩放级别以在地图中显示整个国家。

使用地理编码 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 吗？还是我正在寻找的东西不受支持？

4

1 回答 1

5

响应中还返回的是一个边界框，您可以将其传递给map.fitBounds精确坐标 + 缩放：

var bbox = res.features[0].bbox;
map.fitBounds([
  [bbox[0], bbox[1]],
  [bbox[2], bbox[3]]
]);
于 2016-01-30T20:48:12.960 回答