在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

來源

2017-03-01 hotshot146

在setMarkerLatLng功能您正在檢查的經緯度值，而不是兩次緯度和經度。

類似地，在saveMarkerLatLng函數中，您將設置lat值兩次。

來源

2017-03-01 07:28:19 BenShelton

我更改了代碼來檢查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 
};

來源

2017-03-01 07:40:08

我有同樣的問題，通過指定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的字段的索引。

來源

2017-05-30 23:29:00

在Qualtrics上使用Google Map API

回答

相關問題