如何将基于坐标的Mapbox地图改为使用邮政编码？

Question

我已经根据地理位置坐标设置了带有位置标记的地图。

现在，我被要求以英国邮政编码为基础。我将如何更改JS部分以使其居中并将标记放置到邮政编码（ZIP）位置？谢谢您的帮助。

CSS：

<style>
.marker {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%238200b9;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Emarker%3C/title%3E%3Cpath class='a' d='M20,0A13.3353,13.3353,0,0,0,8.4524,19.9988L20,40,31.5476,19.9988h0A13.3354,13.3354,0,0,0,20,0Zm0,18.9166a5.6134,5.6134,0,1,1,5.6134-5.6134A5.6134,5.6134,0,0,1,20,18.9166Z'/%3E%3C/svg%3E");  
background-size: cover;
  width: 46px; height: 46px; margin-top: -23px;
  }
</style>

HTML：

<div id='map' style='width: 100%; height: 500px;'></div>

JS：

<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFya3VzYXR0cnVlIiwiYSI6ImNrNjk2NXB1ZzBhOWozdW45aHhxZ2hzODEifQ.ZWWxJP61cYov_9EN9PrKdQ';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40], // starting position
    zoom: 16 // starting zoom
  });
  // Add zoom and rotation controls
  map.addControl(new mapboxgl.NavigationControl());
  // Add marker
  // Add marker
   var el = document.createElement('div');
  el.className = 'marker';
  var marker = new mapboxgl.Marker(el)
  .setLngLat([-74.5, 40])
  .addTo(map);
  </script>

Answer 1

您需要对该位置进行地理编码。因此，您需要另一个API。谷歌快速搜索显示LocationIQ看起来不错，但我敢肯定有很多。您要做的是使用邮政编码对您的地理位置服务进行API调用，响应中应包含lat和lng，然后可以在.setLngLat函数中使用。