карты перекрываются в поле зрения? - PullRequest
0 голосов
/ 29 июня 2018

В моем угловом приложении есть 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;
}

эти карты создают холст, и если я сделаю display:none из 1-го холста в инструментах разработчика Chrome, я смогу увидеть скрытую карту.

enter image description here

как мне отдельно отобразить 2 карты?

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

Попробуйте указать разные идентификаторы для селекторов

компонент 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;
}

Надеюсь, это поможет

0 голосов
/ 29 июня 2018

Я считаю, что вам нужно использовать другой идентификатор:

<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>

Создать случайный идентификатор:

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

}

Надеюсь, это поможет вам.

...