Проблемы рендеринга листовок в Ioni c Angular - PullRequest
Новая
       10

Проблемы рендеринга листовок в Ioni c Angular

0 голосов
/ 17 января 2020

У меня возникают некоторые проблемы при попытке показать карту на странице в Ioni c с использованием Angular.

Хотя сама карта работает без ошибок, есть несколько проблем рендеринга, которые меня раздражают :

  1. Загрузка плитки карты изначально очень медленная
  2. Координаты, которые карта должна отображать с помощью setView, находятся в верхнем левом углу карты div (I это можно увидеть с помощью маркера, размещенного на тех же координатах)
  3. Если я изменю размер окна, плитки будут загружаться нормально, как и должно быть, и маркер будет отцентрирован.

Я бы хотел Третий вариант - это всегда: координаты, на которые я указываю setView, должны быть в центре карты.

Вот мой код: 

export class MyPage implements OnInit {

  public acc;

  posLatitude: number;
  posLongitude: number;
  map: L.Map;
  markerIcon = L.icon(
    {
      iconUrl:'assets/pin.svg',
      iconSize: [32, 32],
    }
  );

  constructor(
    private myService: MyService,
  ) { }

  ngOnInit() {
    this.acc = MyService.getAcc();
    this.posLongitude = this.acc["Long"];
    this.posLatitude = this.acc["Lat"];
    this.map = L.map('map').setView([this.posLatitude, this.posLongitude], 16);

    // center the map

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'jsp.com'
     }).addTo(this.map);

    L.marker([this.posLatitude, this.posLongitude], {icon : this.markerIcon}).addTo(this.map)
      .bindPopup('Accident');

    console.log(this.acc);
  }

}

<div id="map" style="height: 75%;"></div>
...