Leafular + Google在Angular 2中 - 错误的拼贴顺序

Question

我正在与Angular 2中的Leaflet和Google合作并遇到问题 - 无法正确渲染Tilemill图块 - 它们以某种奇怪的顺序出现。

这是我得到的：

所以，并非所有部分都在那里，现在它们混合在一起

这是我的代码

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