javascript - Angular 2 中的 Leaflet + Google - 瓷砖顺序错误

Question

我正在 Angular 2 中使用 Leaflet 和 Google，但遇到了一个问题 - 无法正确渲染 Tilemill 图 block - 它们以某种奇怪的顺序出现。

这是我得到的:

所以，并不是所有的部分都在那里，它们现在是混合的

这是我的代码

map.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as L from "leaflet";

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class MapComponent implements OnInit {
  googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 10,
    subdomains:['mt0','mt1','mt2','mt3']
  });
  constructor() {}

ngOnInit() {
  let map = L.map("map", {
    center: [48.13, 11.57],
    zoom: 15,
    zoomControl: true,
    maxZoom: 10
  }).addLayer(this.googleStreets);
   map.invalidateSize();
  L.control.scale().addTo(map);
}}

此处为 HTML

<p>Map</p>
<div id="map"></div>

这是CSS

#map {
  position: absolute;
  height: 90%;
}

Answer 1

您的index.html 中需要此样式表

https://unpkg.com/leaflet@1.0.1/dist/leaflet.css