Question

maps.component.ts：

import { Component, OnInit } from '@angular/core';
import 'rxjs/Rx';

@Component({
    selector: 'maps',
    templateUrl: './maps.component.html',
    styles: []
})

export class MapsComponent implements OnInit {

    //constructor(){}

    ngOnInit(): void {
    }
}

以及相应的 maps.component.html：

<h2>Location of OPMs</h2>
<style>
    #map{
        height:400px;
        width:100%;
    }
</style>
<div id="map"></div>
<script src="initMaps.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=....&callback=initMap">
</script>

和 initMaps.js：

function initMap(){
    // Map options
    var options = {
        zoom:8,
        center:{lat:42.3601,lng:-71.0589}
    }
    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);
}

单独加载.html文件，会显示地图，但是使用角度框架则不会。我如何定义这些脚本，以便在浏览器中加载此.html页面时加载地图？

Answer 1

在tsconfig.json中，将es5添加到lib，如下所示：

"lib": [
      "es2017",
      "dom",
      "es5"
    ]

在Angular组件中定义和构造JavaScripts

1 个答案: