2017-05-19 108 views
2

我想實現的是一個像這樣的餅圖標記link我不知道如何繪製覆蓋圖。我看到一個類似的問題here,但這些答案都不適用於我。 我得到這個錯誤 - 「類型‘任何’不是一個構造函數類型 類google.maps.OverlayView。」類型'any'不是構造函數類型。 class google.maps.OverlayView

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
    const chartsApi = 'https://www.google.com/jsapi'; 
    declare var google: any; 
    declare var $: any; 
    import { } from '@types/googlemaps' 
    @Component({ 
     selector: 'chart-marker', 
     templateUrl: './chart-marker.component.html', 
     styleUrls: ['./chart-marker.styles.scss'] 
    }) 

    export class ChartMarkerComponent { 
     @Input() options: Object; 
     @Input() data: Object; 
     @Output() chartReady: EventEmitter<boolean> = new EventEmitter(); 
     private divToDraw: any; 
     private innerDiv: any; 
     private chart: any; 
     constructor() { 
      this.loadCharts(); 
     } 
// the code below is giving me this error 
     USGSOverlay = class extends google.maps.OverlayView { 
      bounds_: any; 
      image_: any; 
      map_: any; 
      div_: any; 
      constructor(bounds, image, private map) { 
       super(); 
       // Initialize all properties. 

      } 
      /** 
      * onAdd is called when the map's panes are ready and the overlay has been 
      * added to the map. 
      */ 
      onAdd() { 

      }; 
      draw() { 

      }; 
      // The onRemove() method will be called automatically from the API if 
      // we ever set the overlay's map property to 'null'. 
      onRemove() { 

      }; 
     }; 
     private loadCharts() { 
      if (typeof google === "undefined" || typeof google.charts === "undefined") { 
       let node = document.createElement('script'); 
       node.src = chartsApi; 
       node.type = 'text/javascript'; 
       document.getElementsByTagName('body')[0].appendChild(node); 
       node.onload =() => { 
        google.load("visualization", "1", { packages: ['corechart'], "callback": this.drawChart.bind(this) }); 
       } 
      } 
     } 
     private drawChart() { 
      this.chartReady.emit(true); 
     } 

    } 
+1

請張貼代碼 –

+0

我已經編輯我的問題,包括代碼。 – RemyaJ

+0

您使用v2.3的TS版本是什麼? – mfeineis

回答

0

我懷疑打字稿不承認your Google Maps API typings則認爲你所指的是any,它不允許繼承,因此是錯誤信息。據我所知,你不能導入類型,但他們被視爲在TS行話中的ambient聲明 - 因此有一個tsconfig.json和類型安裝在你的項目目錄應該足夠。

我會推薦做一個沒有Angular設置的小例子,看看TypeScript實際上是否使用了提供的類型,看看實際的類型應該是可繼承的,並且可以用你想要的方式使用它。

像這樣的事情在一個單一的文件應該足以看到TS是否拿起你的分型:

class extends google.maps.OverlayView { 
    constructor() { 
     super(); 
    } 
};