Angular 10中Mapbox地图上下白边/边框去除方案

问题描述 #

我在开发Angular 10项目，用Mapbox展示路径路线。按照组件拆分规范，把地图渲染逻辑抽成独立的<app-mini-map>组件，在<new-map>主组件中调用，但无论将地图放入哪个容器，地图上下都会出现白边/边框。只有在父组件中直接用单个div渲染地图时，才不会出现这个问题。

相关代码 #

new-map.component.html #

<details>
  <summary class="bg-light text-dark">
    <nav class="navbar navbar-light
                bg-light fs-3 justify-content-end"
                (click)="changeMapArrow()">
      <span class="material-icons">
        <b>{{arrowClass}}</b>
      </span>
    </nav>
  </summary>
  <app-mini-map></app-mini-map>
</details>

mini-map.component.html #

<div class="row d-flex flex-column">
  <div class="col-12">
    <div class="row">

      <div class="col-6 ml-0">
        <b>Needs to know:</b>
        <span class="text-primary ml-3">
          <b>4
            <span class="material-icons check-icon-position mr-1">
              check_circle_outline
            </span>
          </b>
        </span>
        |
        <span class="text-danger ml-2">
          <b>2 ETA Delay</b>
        </span>

      </div>

      <div class="col-6 d-flex flex-row justify-content-end align-items-start">

        <p class="text-muted">Style map:</p>

        <input type="radio" class="btn-check ml-3" name="options" id="option1" autocomplete="off" checked>
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option1" (click)="setMapStyle('gray', 'to_gray')">
                <b>Gray</b>
        </label>

        <input type="radio" class="btn-check ml-3" name="options" id="option2" autocomplete="off">
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option2" (click)="setMapStyle('dark', 'to_dark')">
                <b>Dark</b>
        </label>

        <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
        <label class="btn btn-light ml-3 btn-style-position text-muted"
                for="option4" (click)="setMapStyle('color', 'to_color')">
                <b>Color</b>
        </label>
      </div>

    </div>
  </div>

  <div id="map-container" class="col-12">
    <div #miniMapa class="border-rnd-map mini-mapa-test"></div>
    <ul class="list-group" [style.display]="!cardinalPointsMenu ? 'none' : 'block'" >
      <ng-container *ngFor="let point of pointsToFitBound">
        <li class="list-group-item"
            (click)="moveToFitArea(point.fitPoint)"
            *ngIf="point.ableToShow">
          {{point.cardinalPoint}}
        </li>
      </ng-container>
    </ul>
  </div>
</div>

mini-map.component.sass #

#map-container
  width: 100%
  height: 200px
  margin: 0 auto

.mini-mapa-test
  width: 100%
  height: 500px
  margin: 0 auto

问题截图 #

解决方案 #

1. 清除Bootstrap容器默认边距 #

Bootstrap的row、col类自带默认margin/padding，这是白边的常见来源，直接覆盖：

.row
  margin: 0 !important
  padding: 0 !important

.col-12
  margin: 0 !important
  padding: 0 !important

#map-container
  width: 100%
  height: 200px
  margin: 0 auto
  padding: 0 !important

2. 强制重置地图容器样式 #

确保Mapbox容器没有继承额外边框或内边距：

.mini-mapa-test
  width: 100%
  height: 500px
  margin: 0 auto
  padding: 0 !important
  border: none !important

3. 延迟初始化地图并触发重绘 #

组件嵌套时，Mapbox可能在容器尺寸未稳定时初始化，在mini-map组件中调整初始化时机：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-mini-map',
  templateUrl: './mini-map.component.html',
  styleUrls: ['./mini-map.component.sass']
})
export class MiniMapComponent implements AfterViewInit {
  @ViewChild('miniMapa') miniMapa!: ElementRef;
  map!: mapboxgl.Map;

  ngAfterViewInit(): void {
    // 延迟确保容器尺寸计算完成
    setTimeout(() => {
      this.initMap();
    }, 100);
  }

  initMap(): void {
    this.map = new mapboxgl.Map({
      container: this.miniMapa.nativeElement,
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-74.5, 40],
      zoom: 9
    });

    // 地图加载完成后触发重绘
    this.map.on('load', () => {
      this.map.resize();
    });
  }
}

4. 覆盖<details>标签默认样式 #

父组件的<details>标签可能自带默认样式，直接清除：

details
  padding: 0 !important
  border: none !important

summary
  padding: 0 !important
  border: none !important

内容的提问来源于stack exchange，提问作者Pedro Miguel Pimienta Morales