mapbox修改样式

边中之城2023-12-16 16:22

mapbox有些其实document绘制而成，比如control控件

故而会涉及到样式修改，以适配系统主题

先决条件

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

javascript 复制代码

yarn add mapbox-gl

// or
npm install mapbox-gl

修改样式

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

javascript 复制代码

@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文件引入该样式文件

javascript 复制代码

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