Question

我想要实现的是像这样的饼图标记link我无法弄清楚如何绘制叠加层。我看到了一个类似的问题here，但这些答案都不适合我。我收到此错误 - “ 类型'任何'不是构造函数类型。 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);
        }

    }

Answer 1

我怀疑TypeScript没有识别your Google Maps API typings所以它假定你所指的是any类型，它不允许继承，因此错误信息。据我所知，你不能导入这些类型，但它们在TS术语中被视为ambient声明 - 所以有一个tsconfig.json并且项目目录中安装的类型应该足够了。

我建议在没有你的Angular设置的情况下做一个最小的例子来看看TypeScript是否实际使用了提供的类型，查看类的实际类型应该是可继承的，并且可以按照你尝试这样做的方式使用

在单个文件中的这样的东西应该足以看出TS是否正在提升您的类型：

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

类型“any”不是构造函数类型。 google.maps.OverlayView类

1 个答案: