地图在视图中重叠？

Question

我的 angular 应用程序中有 2 个组件，每个组件都有要显示的地图 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;
}

这些地图正在创建 canvas，如果我在 chrome 开发工具中制作第一个 canvas 的 display:none，我可以看到隐藏的地图。

如何分别显示2张地图？

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);
  }

}

希望对您有所帮助。

Answer 2

尝试为您的选择器提供不同的 ID

组件 1

<div class="col-md-12 contentDiv">
  ....
      <div id='mapa'></div>
  ....
</div>

组件 2

<div class="col-md-12 contentDiv">
  ....
      <div id='mapb'></div>
  ....
</div>

以及全球 css

#mapa {
    width: auto;
    height: inherit;
    position: relative;
}

#mapb {
    width: auto;
    height: inherit;
    position: relative;
}

希望对您有所帮助

地图在视图中重叠？

maps are overlapping in view?

css

angular

mapbox

mapbox-gl