如何在Google Maps API中为AdvancedMarkerElement添加自定义属性

AdvancedMarkerElement的构造函数仅接受官方定义的配置属性（如map、position等），直接在构造选项中加入自定义属性会触发参数校验错误，所以你遇到了Unknown property 'dataWHD' of AdvancedMarkerElement的提示。

可以通过以下两种方式实现自定义属性的添加：

• 方式一：实例创建后直接赋值
  先创建符合规范的AdvancedMarkerElement实例，再为实例动态添加自定义属性：

  const marker = new AdvancedMarkerElement({
    map: this.map,
    position: data.position,
  });
  // 直接添加自定义属性
  marker.dataWHD = data.data;
  

• 方式二：使用HTMLElement的dataset属性
  由于AdvancedMarkerElement继承自HTMLElement，可利用dataset存储自定义数据（适合需要遵循HTML规范的场景）：

  const marker = new AdvancedMarkerElement({
    map: this.map,
    position: data.position,
  });
  // 存储自定义数据（复杂数据需转为JSON字符串）
  marker.dataset.whd = JSON.stringify(data.data);
  // 读取时解析数据
  const targetData = JSON.parse(marker.dataset.whd);
  

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