Блог

Я здесь новичок 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);
//...
 

Попробуйте это в survey.component.ts :

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

Когда мы хотим создать опрос, мы проходим SurveyKo . Но когда мы хотим увидеть созданный опрос, мы передаем Survey , который является экземпляром опроса.