在 SurveyJs 中创建 Google 地图小部件答案

【问题标题】：Create Google Map Widget in SurveyJs在 SurveyJs 中创建 Google 地图小部件
【发布时间】：2021-10-02 13:25:32
【问题描述】：

我是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,

文件名：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",
    },
  ]);
}

文件名：survey.creator.component.ts

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

文件名：survey.component.ts

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

【问题讨论】：

标签： javascript angular typescript google-maps surveyjs

【解决方案1】：

在survey.component.ts试试这个：

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

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

【讨论】：