Google Maps继承AdvancedMarkerView报错TypeError: Illegal constructor

问题原因 #

Google Maps JavaScript API的近期更新中，google.maps.marker.AdvancedMarkerView的实现方式被调整，不再允许通过原生ES6类继承的方式扩展该类，这就是触发TypeError: Illegal constructor的核心原因。

修复方案 #

方案1：用组合模式替代继承（推荐，保留类结构） #

不再直接继承AdvancedMarkerView，而是在自定义类内部持有一个原生AdvancedMarkerView实例，按需代理属性和方法，同时挂载自定义数据：

class ParkingMarkerView {
    #internalMarker;
    pData;

    constructor(options) {
        // 分离自定义属性与Marker原生配置项
        const { pData, ...markerOptions } = options;
        // 创建原生AdvancedMarkerView实例
        this.#internalMarker = new google.maps.marker.AdvancedMarkerView(markerOptions);
        // 挂载自定义数据
        this.pData = pData;
    }

    // 按需代理原生Marker的属性和方法
    get position() {
        return this.#internalMarker.position;
    }

    set position(newPosition) {
        this.#internalMarker.position = newPosition;
    }

    setMap(map) {
        this.#internalMarker.map = map;
    }

    // 其他需要的方法（如getMap、setContent等）可按相同方式代理
}

// 使用方式与之前完全一致
const marker = new ParkingMarkerView({
    position: { lat: latitude, lng: longitude },
    map,
    draggable: false,
    pData,
    content,
});

方案2：直接创建实例并挂载自定义属性（简洁高效） #

如果不需要扩展额外方法，直接创建原生Marker实例后挂载自定义属性即可，代码更轻量化：

function createParkingMarker(options) {
    const { pData, ...markerOptions } = options;
    const marker = new google.maps.marker.AdvancedMarkerView(markerOptions);
    // 直接挂载自定义数据
    marker.pData = pData;
    return marker;
}

// 使用示例
const parkingMarker = createParkingMarker({
    position: { lat: latitude, lng: longitude },
    map,
    draggable: false,
    pData,
    content,
});

方案3：利用Marker规范存储自定义数据（可选） #

部分Google Maps组件支持通过set()/get()方法存储自定义数据，若需要更规范的方式可尝试：

const marker = new google.maps.marker.AdvancedMarkerView({
    position: { lat: latitude, lng: longitude },
    map,
    draggable: false,
    content,
});
// 存储自定义数据
marker.set('pData', pData);
// 获取自定义数据
const data = marker.get('pData');

注：需确认当前API版本是否支持该接口，部分新组件可能未实现此功能。

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