Angular 8 和带有标记聚类的谷歌地图 - 类型错误 markercluster 不是构造函数

Question

我正在尝试开始使用谷歌地图和标记聚类（本机，即不使用 AGM）。 map 加载一切正常，我在 map 中添加了几个标记。 但是，当尝试添加标记聚类器时，出现类型错误。 内容如下：

错误类型错误：“_google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ 不是构造函数”

我已经使用 npm 安装了标记聚类器，如下所示：

npm i @google/markerclusterer --save-dev

然后将以下内容与处理标记/聚类的其他导入一起添加到文件顶部的组件中：

import * as MarkerClusterer from "@google/markerclusterer";

然后在我的 class 中，我像示例中所说的那样使用它：

const gmarkers = [];

            _.each(this.venueData.venues, (venue) => {
                const mPosition = new google.maps.LatLng(venue.latlng.lat, venue.latlng.lng);
                const marker = new google.maps.Marker({position: mPosition, map: this.map});

                gmarkers.push(marker);
            });

            const test = new MarkerClusterer(this.map, gmarkers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
            );

我已经尝试卸载并重新安装 google marker clusterer 以及尝试切换到 marker clusterer plus 但仍然是同样的问题。

Answer 1

我设法通过更改以下导入来解决此问题。

改变这个：

import * as MarkerClusterer from '@google/markerclusterer';

至：

import MarkerClusterer from '@google/markerclusterer';

Answer 2

将markerclusterer添加到angular build并在组件文件中声明MarkerClusterer。

在 angular.json

"scripts": [
    "node_modules/@google/markerclusterer/dist/markerclusterer.min.js"
 ]

在组件.ts

declare var MarkerClusterer:any;

注意：在加载 markerclusterer.js 之前，请确保您加载了谷歌地图脚本。