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

我已经用地理坐标建立了一张带有位置标记的地图

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

CSS:

.马克{
背景图片：url("数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg“viewBox='0 40 40'%3E%3defs%3E%3Cstyle%3E.a%7fill:%238200b9；%7D%3C/style%3E%3E%3title%3Emarker%3C/title%3E%3E%3path class='a'd='M20,0A13.3353,13.3353,0,0,0,8.4524,19.9988L20,40,31.5476,19.9988h0A13.3354,13.3354,13.3354,0,0,0,0,20,0,0,0,0,0,0,0,0,0,0.660,18.615,34,615,615,5,5,5,34,615,5,5,6,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,134,0,0,1,20,18.9166Z'/%3E%3C/svg%3E”）；
背景尺寸：封面；
宽度：46px；高度：46px；页边距顶部：-23px；
}

HTML:

JS:

mapboxgl.accessToken='pk.eyj1ijoibwfya3vzyxr0cnvliwiysi6imnjk2nxb1zzbhowzozdw45ahhxz2hzodeifq.zwwwxjp61cyov_9EN9PrKdQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[-74.5,40]，//起始位置
缩放：16//开始缩放
});
//添加缩放和旋转控件
addControl（新的mapboxgl.NavigationControl（））；
//添加标记
//添加标记
var el=document.createElement（'div'）；
el.className='marker'；
var标记=新的mapboxgl.标记（el）
.setLngLat（[-74.5,40]）
.addTo（地图）；

您需要对地理位置进行地理编码。因此，您需要另一个API。快速的谷歌搜索显示，这看起来很不错，但我肯定有很多。您要做的是使用邮政编码对地理定位服务进行API调用，响应应该包含一个

lat

和

lng

，然后可以在中使用您的

.setLngLat

函数。

既然您已经在使用Mapbox GL JS来显示地图，我建议您使用来获取特定邮政编码的纬度和经度。从Mapbox可以很好地从概念上概述地理编码是什么以及它是如何工作的。具体来说，对于您的用例来说，最相关的是

例如，假设您想查找英国邮政编码“EC1A 1BB”的地理坐标。您可以向Mapbox正向地理编码端点发出以下请求：

https://api.mapbox.com/geocoding/v5/mapbox.places/EC1A%201BB.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN&autocomplete=true

，用加载GL JS地图时使用的相同访问令牌替换

您的地图盒\u访问\u令牌

。如果您通过将请求URL复制到浏览器中查看此请求的响应体，您将看到它返回

地名：“EC1A 1BB，伦敦，大伦敦，英国“

和邮政编码区域中心的坐标：

-0.1120425、51.5245653

因此，您可以解析此请求的响应正文，以获取

几何体的
[经度，纬度]
。坐标

，将坐标存储在

坐标

变量中，并使用此变量在地图上定位标记：

var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
  .setLngLat(coordinates)
  .addTo(map);

<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>

https://api.mapbox.com/geocoding/v5/mapbox.places/EC1A%201BB.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN&autocomplete=true

var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
  .setLngLat(coordinates)
  .addTo(map);