Openstreetmap未正确显示

Question

我尝试将openstreetmap图层绑定到我的angular2 / 4应用程序。我用了这个简单的例子：

  <script type="text/javascript"
 src="http://www.openlayers.org/api/OpenLayers.js"></script>   <script
 type="text/javascript"
 src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

apiOpenLayer.service.ts     从'@ angular / core'导入{Injectable，AfterViewInit};     从'@ angular / http'导入{Response，Http，Headers，RequestMethod，RequestOptions};     声明var OpenLayers：any;

declare var $: any;
declare OpenLayers: any;

@Injectable()
export class APIOpenLayer {
    public map: any;


    init() {
        this.map = new OpenLayers.Map("basicMap");
        var mapnik         = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);
        var zoom           = 15; 

        this.map.addLayer(mapnik);
        this.map.setCenter(position, zoom );
      }     

}

我在compoent中调用的这项服务

map.component.ts

import { Component, OnInit, Output, EventEmitter, AfterViewInit} from '@angular/core';
import {APIOpenLayer} from '../../../services/apiOpenLayer.service';
declare var OpenLayers:any;
@Component({
  selector: 'search',
  styleUrls: ['./map.component.css'],
  templateUrl: './map.component.html'
})

export class SearchComponent implements OnInit, AfterViewInit {
constructor(public apiMapService:APIOpenLayer){}
ngAfterViewInit(){
this.apiMapService.init();
}
}

我可以看到容器，但不能看到容器中的地图，如下所示：

地图会添加到标签中。也许这可能是问题？