如何将脚本集成到 Angular 4 组件？

Question

我正在关注 Google 地图 Api 服务 (https://developers.google.com/maps/documentation/javascript/marker-clustering) 的文档。我想在应用程序组件中使用显示地图集群，但 Angular 组件没有支持导入外部脚本。即使我导入脚本，我也无法更改脚本的内容（例如更改 var 位置..）。那么如何在 component.ts 文件中导入和维护这些脚本。将脚本直接复制粘贴到 component.ts 时会发生错误，例如变量未声明，因为它们是在外部脚本文件中声明的。请不要向我推荐 agm angular 地图，因为它不支持地图集群。请帮我解决这个问题。

<script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Answer 1

angular 支持导入外部脚本。看看这个线程。

Answer 2

按照教程解决了这个问题。问题是我们应该声明变量才能使用外部脚本。 https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/ 或者我们也可以使用 typings 来安装可以从 https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

获取的 typescript 定义文件

如何将脚本集成到 Angular 4 组件？

How can I integrate scripts to Angular 4 component?

google-maps-api-3

google-maps-markers

angular2-template

angular