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

问题描述：

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

<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不支持它。 –

答

通过以下教程解决了这个问题。问题是我们应该声明变量以便使用外部脚本。 https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/ 或者我们也可以使用类型来安装打字稿定义文件，其可以从https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

答

角度支持导入外部脚本。看看这些线。 Load external js script dynamically in Angular 2

是的，最后我找到了它。我跟着Nic Raboy的一个很好的教程，它工作了。谢谢你的帮助！ –

发布您的参考。谢谢 – sancelot

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

相关推荐