在Qualtrics上使用Google Map API

问题描述：

我正在撰写关于Qualtrics的调查并希望显示Google地图，以便用户可以标记位置。我想从标记中获取经纬度。我遇到的问题是我获得经度，但它会显示在纬度文本框中。纬度也没有显示出来。我附上了一张显示问题的屏幕截图。这是我的代码。我怎样才能在正确的文本框中显示经纬度？在Qualtrics上使用Google Map API

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

答

在setMarkerLatLng功能您正在检查的经纬度值，而不是两次纬度和经度。

类似地，在saveMarkerLatLng函数中，您将设置lat值两次。

我更改了代码来检查lat和lng两个setMarkerLatLng和saveMargerLatLng。我仍然有同样的问题。我还用更新后的代码更新了问题。 – hotshot146

这是什么时候不起作用？当地图加载？当你拖动标记？当你点击地图？ – BenShelton

当我点击添加标记或拖动标记时，它不起作用。它更新经度编号。我查了一下，这是该地区的正确经度。 – hotshot146

答

更改此： 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 
};

答

我有同样的问题，通过指定ind来解决它纬度和经度领域例如：

相反的：

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

相关推荐