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

【问题标题】：How can I integrate scripts to Angular 4 component?如何将脚本集成到 Angular 4 组件？
【发布时间】：2018-01-23 04:01:12
【问题描述】：

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

<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>

【问题讨论】：

@Arg0n 。嗨，Arg0n。不，不幸的是 Angular 不支持它。

标签： angular google-maps-api-3 google-maps-markers angular2-template

【解决方案1】：

angular 支持导入外部脚本。看看这个线程。 Load external js script dynamically in Angular 2

【讨论】：

是的，我终于找到了。我按照 Nic Raboy 提供的不错的教程进行了操作。谢谢您的帮助！
发布您的参考资料。谢谢

【解决方案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定义文件

【讨论】：