Question

我正在编写有关Qualtrics的调查，并希望显示Google地图，因此用户可以标记位置。我想从标记中获取经度和纬度。我遇到的问题是我获得了经度，但它会显示在纬度文本框中。此外纬度根本没有显示。我包括显示问题的屏幕截图。这是我的代码。如何让纬度和经度显示在右侧文本框中？

    Qualtrics.SurveyEngine.addOnload(function()
    {
    /*Place Your Javascript Below This Line*/

    var google_maps_loaded = false; // no longer seems to be needed, nevertheless
    // no 'var' with functions
    loadedGoogleMapsAPI = function(){ google_maps_loaded = true; };
    // callback kinda required with google maps
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://maps.googleapis.com/maps/api/js?key=REMOVED"
    document.body.appendChild(script);

    var canvas;
    var map;
    var marker;
    var question = this;
    var latitudeIndex  = question.getChoicesFromVariableName('Latitude').first() - 1;
    var longitudeIndex = question.getChoicesFromVariableName('Longitude').first() - 1;
    var lat = $(question.getChoiceContainer()).down('.InputText', latitudeIndex);
    var lng = $(question.getChoiceContainer()).down('.InputText', longitudeIndex);


    setMarkerLatLng = function(){
    if( lat.value && lng.value ){
        marker.setPosition( new google.maps.LatLng(lat.value, lng.value)  );
};
};

     saveMarkerLatLng = function(){
     lat.value = marker.getPosition().lat();
     lng.value = marker.getPosition().lng();
     };

    showGoogleMap = function(){
    background = document.createElement("div");
    background.id = 'map_canvas_background';
    background.setAttribute('style', 'position: absolute; width: 100%; height: 100%; background-color: gray; opacity: 0.6;filter:alpha(opacity=60); top: 0px;');
document.body.appendChild(background);

wrapper = document.createElement("div");
wrapper.id = 'map_canvas_wrapper';
wrapper.setAttribute('style', 'position: absolute; width: 100%; height: 100%; margin: auto; text-align: center; top: 0px;');
document.body.appendChild(wrapper);

canvas = document.createElement("div");
canvas.id = 'map_canvas';
canvas.setAttribute('style', 'width: 400px; height: 400px; margin: 10px auto;');
wrapper.appendChild(canvas);

button = document.createElement("button");
button.innerHTML = "This is the spot. Close GeoCoder.";
button.onclick = function(){
  document.getElementById('map_canvas_background').remove();
  document.getElementById('map_canvas_wrapper').remove();
};
wrapper.appendChild(button);
var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(14.613567,-90.53524),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(canvas, mapOptions);

marker = new google.maps.Marker({
  map: map,
  draggable: true
});
setMarkerLatLng();
google.maps.event.addListener(marker, "mouseup", function(){saveMarkerLatLng();});
google.maps.event.addListener(map,'click',function(event){
  marker.setPosition( event.latLng );
  saveMarkerLatLng();
});

}

});

Sreenshot of problem

Answer 1

在setMarkerLatLng函数中，您需要检查lat值两次而不是lat和lon。

同样在saveMarkerLatLng函数中，您将lat值设置两次。

Answer 2

改变这个： if( lat.value && lat.value )

：if( lat.value && lng.value ) //note lng not lat here

以及改变这个：

 saveMarkerLatLng = function(){
     lat.value = marker.getPosition().lat();
     lat.value = marker.getPosition().lng();
 };

到此：

 saveMarkerLatLng = function(){
     lat.value = marker.getPosition().lat();
     lng.value = marker.getPosition().lng(); // note lng not lat here
 };

Answer 3

我遇到了同样的问题，并通过指定纬度和经度字段的索引来解决它：

而不是：

var lat = $(question.getChoiceContainer()).down('.InputText', latitudeIndex);
var lng = $(question.getChoiceContainer()).down('.InputText', longitudeIndex);

使用：

var lat = $(question.getChoiceContainer()).down('.InputText', 0);
var lng = $(question.getChoiceContainer()).down('.InputText', 1);

将0和1更改为字段的索引。

在Qualtrics上使用Google Map API

3 个答案: