Typescript Angular 8和带有标记群集的Google地图-类型错误markercluster不是构造函数
我正在尝试开始使用谷歌地图和标记聚类(本机使用,即不使用AGM)。地图加载得很好,我在地图上添加了几个标记。然而,当尝试添加marker clusterer时,我得到一个类型错误。内容如下: 错误类型错误:“\u google\u markerclusterer\u网页包\u导入的\u模块\u 7\u”不是构造函数” 我使用npm安装了marker clusterer,如下所示:Typescript Angular 8和带有标记群集的Google地图-类型错误markercluster不是构造函数,typescript,google-maps,angular8,markerclusterer,Typescript,Google Maps,Angular8,Markerclusterer,我正在尝试开始使用谷歌地图和标记聚类(本机使用,即不使用AGM)。地图加载得很好,我在地图上添加了几个标记。然而,当尝试添加marker clusterer时,我得到一个类型错误。内容如下: 错误类型错误:“\u google\u markerclusterer\u网页包\u导入的\u模块\u 7\u”不是构造函数” 我使用npm安装了marker clusterer,如下所示: npm i @google/markerclusterer --save-dev 然后将以下内容与处理标记/群集的
npm i @google/markerclusterer --save-dev
然后将以下内容与处理标记/群集的其他导入一起添加到文件顶部的my component中:
import * as MarkerClusterer from "@google/markerclusterer";
然后在我的课堂上,我使用它,就像例子所说的:
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,但仍然存在相同的问题。我通过更改以下导入来解决此问题 更改此项:
import * as MarkerClusterer from '@google/markerclusterer';
致:
将markerclusterer添加到angular build中,并在组件文件中声明markerclusterer 在angular.json中
"scripts": [
"node_modules/@google/markerclusterer/dist/markerclusterer.min.js"
]
In component.ts
declare var MarkerClusterer:any;
注意:在加载markerclusterer.js之前,请确保加载google地图脚本 谢谢,但是通过这种方式,即使我没有使用它,库也会被加载,我相信。(延迟加载)这篇文章对于完整的集群实现可能很有用
declare var MarkerClusterer:any;