如何操作表单输入使用地理位置而不是纯文本

Posted 2023-02-23

【中文标题】如何操作表单输入使用地理位置而不是纯文本

【英文标题】：How to manipulate a form input use geolocation instead of plain text

【发布时间】：2012-11-03 22:42:24

【问题描述】：

我的 Jquery Mobile 页面上有一个表单，用户可以在其中插入起始位置和目的地。

这些值将保存在本地存储中。 现在我正在尝试像这样操作输入：

当您在输入框中键入（例如）“当前”时，用户的位置将被放置在本地存储数据库中，而不是“当前”一词。

我已经制作了这个脚本来获取用户的位置：

var geocoder;

 if (navigator.geolocation) 
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
 
//Get the latitude and the longitude;
function successFunction(position) 
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)


function errorFunction()
alert("Geocoder failed");


function initialize() 
geocoder = new google.maps.Geocoder();
 

function codeLatLng(lat, lng) 

var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode('latLng': latlng, function(results, status) 
    if (status == google.maps.GeocoderStatus.OK) 
    console.log(results)
        if (results[1]) 
        //formatted address
        document.getElementById('formatedAddress').innerhtml = results[0].formatted_address;
        //find country name
            for (var i=0; i<results[0].address_components.length; i++) 
            for (var b=0;b<results[0].address_components[i].types.length;b++) 

                //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") 
                //this is the object you are looking for
                city= results[0].address_components[i];
                break;
                
            
        
    
    

);

2 个输入字段：

<label for="start">Startlocation:</label>
<input type="text" name="start" value="" id="start"/>

<label for="destination">Destination:</label>
<input type="text" name="destination" value="" id="destination"/>

我对 javascript 和 jQuery 非常陌生，我似乎无法找到解决问题的方法。 我希望有人能帮助我。谢谢！

【问题讨论】：

问题是什么？您的代码中哪些有效或无效，以及引发了哪些错误？

在添加到本地存储之前，我不知道如何操作来自用户的输入（在 javascript/jQuery 中）。

操纵输入是什么意思？您是否尝试过$('input').val('foo') 设置价值和$('input').val() 获取价值。还将一些 HTML 代码附加到您的示例中。最好的肯定是 jsfiddle。

从用户体验的角度来看，在每个输入旁边添加一个标有“使用当前位置”之类的漂亮按钮可能会更好。当用户点击按钮时，它会查找当前位置，并将其放在输入字段中。这使得操作对用户来说是明确的，并简化了保存输入字段的代码（不需要特殊情况）

这是一个很好的选择！你能告诉我如何实现这样一个按钮，或者我在哪里可以找到解释来做这样的事情？

【参考方案1】：

var start = document.getElementById('start').value;

if (start == 'current') 
    //set lat & long to current

else 
    //read lat & long from input fields

这一点逻辑可能证明是您所追求的 - 但是我倾向于同意 logical Chimp 的观点，即用户体验非常重要，并且“使用当前位置”按钮可能对用户更有用.