时间戳

首页 > 解决方案 > 在 SurveyJs 中创建 Google 地图小部件

javascript - 在 SurveyJs 中创建 Google 地图小部件

问题描述

我是新来的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);
//...

在此处输入图像描述

在此处输入图像描述

标签： javascriptangulartypescriptgoogle-mapssurveyjs

解决方案

试试这个survey.component.ts：

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

当我们想要创建一个调查时，我们通过SurveyKo. 但是当我们想查看创建的调查时，我们通过Survey了哪个是调查实例。

推荐阅读