javascript - Typescript + Google Maps API + infobox.js 未捕获类型错误 : InfoBox is not a constructor

Question

有一个使用 Google Maps API 的 Vue.js + Typescript 项目，尝试将 infobox.js(npm 包 google-maps-infobox-window)库导入并在控制台中出现错误:

Uncaught TypeError: InfoBox is not a constructor

图书馆还没有打字，所以一切都还在——照原样导入，没有打字。我尝试了 3 种方法:

• 将 * 导入为信息框“google-maps-infobox-window”
• var InfoBox = require('google-maps-infobox-window')
• 使用手动模块/函数声明制作 *d.ts 文件

而且这些操作都没有效果，InfoBox 构造函数仍然没有找到。在导入 infobox.js 之前，我已经导入了 googlemaps(通过脚本标签)和 RichMarker.js(通过 require(''))，它们运行良好。有人可以帮忙吗？

此外，我尝试将 "allowJs": true 添加到 tsconfig.json，仍然没有

代码:

import { } from '@types/googlemaps';
const RichMarker = require('js-rich-marker');
//problems started below when I use
import { InfoBox } from 'google-maps-infobox-window';
// or this
const InfoBox = require('google-maps-infobox-window');

//...

//and try to use imported function (constructor)
let infoBox = new InfoBox({content: boxText});

Answer 1

为了寻找问题的解决方案，我尝试了很多可能的方法和所有与 infobox.js 相关的 npm 包。最后，我找到了“google-maps-infobox”(https://www.npmjs.com/package/google-maps-infobox)，它没有详尽的描述，但至少可以正常工作。此外，它甚至还有 *.d.ts 文件，可在 ts-project 中提供正确的导入。所以，我安装了这个依赖项并添加到组件的导入部分

import InfoBox from 'google-maps-infobox';

然后这样使用

//in some method (function)
let infoBox: InfoBox = new InfoBox({
    content: //some html markup
});
infoBox.setPosition(mapObject.getPosition());
infoBox.open(this.map);

此外，此包与 require() 导入配合使用效果很好，除了 InfoBox-object 将被键入为 any