css - map 在 View 中重叠？

Question

我的 Angular 应用程序中有 2 个组件，每个组件都有要显示的 map mapbox ，其中一个组件如下图

组件

import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-acs',
  templateUrl: './acs.component.html',
  styleUrls: ['./acs.component.css']
})
export class AcsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    mapboxgl.accessToken = 'api-key';
    let mapbx = new mapboxgl.Map({
      container: 'mapbx',
      style: 'styles',
      zoom: 5,
      center: [-80.118, 25.897]
    });

  }

}

组件 html

<div class="col-md-12 contentDiv">
  <div class="row">
    <h4 class="center subHeader">ACS</h4>
  </div>
  <div class="row">
    <div class="mapArea">
      <div id='map'></div>
    </div>
  </div>
</div>

我还有另一个具有类似代码的组件

全局 CSS

 .contentDiv{
    border: 1px solid #b1b0b0;
    margin: 3px;
    height: auto;
}
.subHeader{
    border-bottom: 1px solid #b1b0b0;
    margin: 2px 0px;
    padding: 5px;
}
.region{
    font-size: 16px;
}
.regionDropDown{
    display: inline-block;
    width: auto;
    margin: 0px 10px;
}
.mapArea{
    background: #e8e5e5; 
    margin: 10px;
    height: 80vh;
}
#map {
    width: auto;
    height: inherit;
    position: relative;
}

这些 map 正在创建 Canvas ，如果我在 Chrome 开发工具中对第一个 Canvas 进行 display:none ，我就能够看到隐藏的 map 。

如何分别显示 2 个 map ？

Answer 1

我相信您需要使用不同的 ID:

<div class="col-md-12 contentDiv">
  <div class="row">
    <h4 class="center subHeader">ACS</h4>
  </div>
  <div class="row">
    <div class="mapArea">
      <div [id]="randomId"></div>
    </div>
  </div>
</div>

生成随机ID:

import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-acs',
  templateUrl: './acs.component.html',
  styleUrls: ['./acs.component.css']
})
export class AcsComponent implements OnInit {
  public randomId: string;
  constructor() { }

  ngOnInit() {
    mapboxgl.accessToken = 'api-key';
    this.randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
    setTimeout(() => {
      let mapbx = new mapboxgl.Map({
        container: this.randomId,
        style: 'styles',
        zoom: 5,
        center: [-80.118, 25.897]
      });
    }, 0);
  }

}

希望这对您有帮助。