mapbox有些其实document绘制而成,比如control控件
故而会涉及到样式修改,以适配系统主题

先决条件

必须要安装mapbox-gl,申请access_token

yarn add mapbox-gl// ornpm install mapbox-gl

修改样式

新建一个_mapbox-gl.scss文件,引入mapbox css源文件,然后修改

@import '~mapbox-gl/dist/mapbox-gl.css';.mapboxgl-popup.mapboxgl-popup-anchor-top {max-width: none !important;}.mapboxgl-popup-content {background: var(--v-backgroundColor-base) !important;padding: 0;}.mapboxgl-popup-tip {display: none !important;}.mapboxgl-marker {z-index: 9;}.mapboxgl-canvas {border-radius: 6px;}.map-icon {position: absolute;top: 10px;left: 10px;}

在使用mapbox的vue文件引入该样式文件

<style lang="scss" scoped>@import url('../../styles/vendors/_mapbox-gl.scss');</style>