在SurveyJs中创建Google Map Widget

Question

我是SurveyJS的新手。我想将Google Map作为小部件添加到SurveyJS中。我执行了一些步骤，在Survey Designer部分正确地添加了地图，但是它没有在Test Survey部分加载我的小部件。我已经上传了下面的代码和图片，请指导我，谢谢

angular: ^7.3.9,
survey-analytics: ^1.7.26,
survey-angular: ^1.8.70,
survey-creator: ^1.8.70,
survey-knockout: ^1.8.70 ,
survey-pdf: ^1.8.70,
surveyjs-widgets: ^1.8.70,

fileName：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");
      Survey.JsonObject.metaData.addProperties("googlemap", [
        { name: "lat", default: 29.635703 },
        { name: "lng", default: 52.521924 },
      ]);
      createProperties(Survey);
    },
    isDefaultRender: false,
    htmlTemplate:
      "<div class='custom-tessting-input' id='google-map-design'></div>",
    afterRender: function (question: any, element: any) {
      debugger;
      var findDiv = document.getElementById("google-map-design");
      findDiv.style.height = "500px";
      findDiv.style.width = "100%";
      let loader = new Loader({
        apiKey: "xxxxxxxxxxx",
      });
      loader
        .load()
        .then((google) => {
          new google.maps.Map(document.getElementById("google-map-design"), {
            center: { lat: question.lat, lng: question.lng },
            zoom: 6,
          });
        })
        .catch((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",
    },
  ]);
}

fileName：survey.creator.component.ts

//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...

fileName：survey.component.ts

//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...

​

​

​

​

Answer 1

在survey.component.ts中试试这个

//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(Survey);
//...

当我们想要创建一个调查时，我们传递SurveyKo。但是，当我们想要查看创建的调查时，我们传递Survey，它是调查实例。