Question

我的角度应用程序中有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;
}

这些地图正在创建画布，并且如果我在chrome开发工具中使用第一画布的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;
}

希望有帮助

地图是否在视图中重叠？

2 个答案: