MapBox attribution标识溢出地图侧边，如何正确调整其显示位置？

问题：如何重新定位MapBox的attribution文本 #

我该如何重新定位MapBox的attribution文本？我当前的实现代码如下：

const map = new mapboxgl.Map({
  accessToken: '...',
  container: 'map',
  center: [16.572149246748594, 19.06111670348622],
  zoom: 1.5,
  style: 'mapbox://styles/my/map',
  attributionControl: false,
})
.addControl(new mapboxgl.AttributionControl({
  compact: true
}), 'top-left')

但该配置没有生效，attribution仍然显示在地图外侧的左下角位置，请问该如何修复这个问题？

补充说明：我使用的是MapBox的NPM包，而非script标签引入的版本，请问该引入方式是否会对配置产生影响？

回答 #

NPM 包引入方式本身不会对 Mapbox 配置产生影响，你的配置逻辑符合官方规范，不生效可按以下场景排查修复：

• 未引入 Mapbox GL 配套的CSS文件
  Mapbox 控件的定位逻辑完全依赖自带的CSS类实现，NPM 安装场景下很多开发者会漏掉引入样式文件，导致位置参数不生效。只需要在代码入口处添加一行引入即可：

import 'mapbox-gl/dist/mapbox-gl.css'

• 自定义样式和默认定位规则冲突
  如果已经引入CSS仍未生效，可以检查是否有全局样式覆盖了.mapboxgl-ctrl-attribution或.mapboxgl-ctrl-top-left的定位属性，如有冲突可以新增优先级更高的样式手动调整：

.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attribution {
  position: absolute !important;
  left: 10px;
  top: 10px;
  margin: 0;
}

• 版本兼容性问题
  如果以上操作都无效，可以检查你使用的mapbox-gl包版本是否为v1.0以上的稳定版，部分远古版本存在addControl位置参数不生效的兼容性问题，升级到稳定版即可解决。

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