SurveyJS添加Google Map组件后测试问卷环节无法加载问题求助

问题核心原因 #

1. 你在htmlTemplate中使用了固定id google-map-design，当Designer和Test Survey模块同时渲染该组件时会出现id重复，document.getElementById只能匹配到首个出现的元素，导致Test Survey模块的地图容器找不到。
2. afterRender回调已经传入了当前组件对应的根DOM元素element，不需要全局搜索DOM，直接操作该元素稳定性更高。
3. 你在错误捕获逻辑中没有打印日志，谷歌地图API加载出错时会被静默吞掉，无法定位加载失败原因。
4. 你同时定义了lat/lng和latitude/longitude两组属性，属性名不统一会导致配置的经纬度不生效。

修复代码 #

修改后的mapWidget.ts

import { Loader } from "@googlemaps/js-api-loader";
export function init(Survey: any) {
  var widget = {
    name: "googlemap",
    title: "google map survey",
    iconName: "my-custom-icon",
    init() {},
    widgetIsLoaded: function () {
      return true;
    },
    isFit: function (question: any) {
      let type = question.getType();
      return type === "googlemap";
    },
    activatedByChanged: function (activatedBy) {
      Survey.JsonObject.metaData.addClass("googlemap", [], null, "text");
      // 统一属性名，和下方Serializer配置保持一致
      Survey.JsonObject.metaData.addProperties("googlemap", [
        { name: "latitude", default: 29.635703 },
        { name: "longitude", default: 52.521924 },
      ]);
      createProperties(Survey);
    },
    isDefaultRender: false,
    // 去掉固定id，改用类名标识容器
    htmlTemplate: "<div class='custom-map-container'></div>",
    afterRender: function (question: any, element: any) {
      // 仅在当前组件的DOM范围内查找容器，避免全局匹配错误
      const mapContainer = element.querySelector(".custom-map-container");
      mapContainer.style.height = "500px";
      mapContainer.style.width = "100%";
      let loader = new Loader({
        apiKey: "替换为你自己的有效API密钥",
      });
      loader
        .load()
        .then((google) => {
          new google.maps.Map(mapContainer, {
            // 统一使用配置的属性名取值
            center: { lat: Number(question.latitude), lng: Number(question.longitude) },
            zoom: 6,
          });
        })
        .catch((err) => {
          // 增加错误打印，方便排查API密钥、权限类问题
          console.error("谷歌地图加载失败：", err);
        });
    },
  };
  Survey.CustomWidgetCollection.Instance.add(widget, "customtype");
}

function createProperties(Survey) {
  var props = createGeneralProperties(Survey);
  return props;
}
function createGeneralProperties(Survey) {
  return Survey.Serializer.addProperties("googlemap", [
    {
      name: "latitude:textbox",
      category: "general",
      default: "29.635703",
    },
    {
      name: "longitude:textbox",
      category: "general",
      default: "52.521924",
    },
  ]);
}

额外检查项 #

• 确认你使用的谷歌地图API密钥已开启当前部署域名的访问权限，没有配额限制
• 确认survey.component.ts中初始化widget的代码执行时机在Survey实例渲染之前

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