如何添加Geocoder？Mapbox GL JS地理编码插件配置疑问

问题解答 #

• Geocoder是什么，是否为独立应用？
  不是独立应用，它是Mapbox官方推出的、适配Mapbox GL JS地图库的交互插件，核心作用是给你页面上的Mapbox地图增加地址搜索能力：支持输入文本地址自动匹配对应地理坐标（正向地理编码），也支持选中地图点位返回对应地址信息（逆地理编码），本质是封装了Mapbox地理编码API的前端UI组件。
• 资源从哪里获取？
  官方提供了直接可用的CDN资源链接，不需要单独下载安装，也可以通过npm包管理器安装到前端工程中使用。
• 如何添加Geocoder对应的JavaScript链接？CSS要加到哪个HTML文件？
  你需要把Geocoder的JS、CSS引用都加到你之前用来初始化地图、放置标记的同一个HTML文档的<head>标签里，不需要新建单独的HTML文件。

引用示例如下，你可以直接把对应标签复制到你现有HTML的head部分，放在原有Mapbox GL JS的引用之后即可：

<head>
  <!-- 原有你已经引入的Mapbox GL JS资源 -->
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
  <!-- 新增Geocoder插件的CSS、JS引用 -->
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css">
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
</head>

引用完成后，你就可以在地图初始化的JS代码中添加Geocoder控件，示例如下：

map.on('load', () => {
  // 初始化Geocoder，直接使用你之前配置的Mapbox访问令牌即可
  const geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl
  })
  // 将搜索控件添加到地图上
  map.addControl(geocoder)
})

内容的提问来源于stack exchange，提问作者TobiasKink