Vue.js+Typescript项目引入google-maps-infobox-window遇构造函数错误求助

我之前也碰到过类似的问题，这类老的Google Maps插件npm包大多不是标准ES模块导出，而是依赖全局Google Maps对象并挂载到它上面——这就是你直接用import/require拿不到构造函数的核心原因。下面是具体的解决步骤：

1. 先搞懂问题本质 #

google-maps-infobox-window本质是infobox.js的npm封装，它的代码逻辑是把InfoBox构造函数挂载到全局的google.maps命名空间下，而非通过export对外暴露。所以你之前直接import或require得到的并不是构造函数本身，自然会触发"不是构造函数"的错误。

2. 正确的导入与使用方式 #

首先确保你已经安装了包：

npm install google-maps-infobox-window --save

在Vue组件中，你只需要保证Google Maps全局对象已加载（你已经通过script标签导入了，这步没问题），然后导入infobox包——它会自动把InfoBox挂载到google.maps上：

import { } from '@types/googlemaps';
const RichMarker = require('js-rich-marker');

// 导入infobox，执行后会自动挂载到google.maps命名空间
require('google-maps-infobox-window');

// 实例化时直接使用google.maps.InfoBox
const boxText = document.createElement('div');
boxText.innerHTML = '你的弹窗内容';

const infoBox = new google.maps.InfoBox({
  content: boxText,
  // 可根据需求添加其他配置项
  pixelOffset: new google.maps.Size(-50, -10),
  boxStyle: {
    background: '#fff',
    padding: '8px 12px',
    borderRadius: '4px',
    boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
  }
});

// 绑定到地图标记上
infoBox.open(yourMapInstance, yourMarkerInstance);

3. 让TypeScript识别InfoBox类型 #

因为这个库没有官方类型定义，你需要手动创建类型声明文件来避免TS报错：

在项目src目录下创建types/infobox.d.ts文件，内容如下：

declare namespace google.maps {
  // 声明InfoBox类，继承自Google Maps的MVCObject
  class InfoBox extends MVCObject {
    constructor(options?: InfoBoxOptions);
    open(map?: Map, anchor?: MVCObject): void;
    close(): void;
    setContent(content: string | Node): void;
    // 可根据实际使用需求添加更多方法/属性
  }

  // 声明InfoBox的配置项接口
  interface InfoBoxOptions {
    content?: string | Node;
    disableAutoPan?: boolean;
    maxWidth?: number;
    pixelOffset?: Size;
    zIndex?: number;
    boxStyle?: Record<string, string>;
    closeBoxMargin?: string;
    closeBoxURL?: string;
    infoBoxClearance?: Size;
    isHidden?: boolean;
    pane?: string;
    enableEventPropagation?: boolean;
  }
}

然后在tsconfig.json中确保TypeScript能识别这个类型文件：

{
  "compilerOptions": {
    // 保留你原有配置，新增以下内容
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
  "include": ["src/**/*"]
}

4. 关键验证点 #

• 确保Google Maps的script标签加载在infobox导入之前（你已经做到了）
• 不要尝试直接从google-maps-infobox-window导入InfoBox，而是通过全局的google.maps.InfoBox访问
• 确认类型声明文件被TS正确识别，避免类型报错

这样应该就能解决你遇到的"InfoBox is not a constructor"错误了。

内容的提问来源于stack exchange，提问作者Dried09