我有这个html代码显示地理位置:
<span id="currentLat"></span>, <span id="currentLon"></span>
与javascript代码相结合,它可以完美地工作。问题是我想在一个文本框中显示上面的值。
I did try:
<input id="" value="<span id="currentLat"></span>, <span id="currentLon"></span>" size="30" />
,但它给我错误。我如何将值添加到文本字段值?
注:
我添加了javascript代码,用来确切地知道代码出了什么问题,但也许代码不能在文本输入字段中工作。
<script>
window.onload = function() {
var startPos;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById("startLat").innerHTML = startPos.coords.latitude;
document.getElementById("startLon").innerHTML = startPos.coords.longitude;
}, function(error) {
alert("Error occurred. Error code: " + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from locaton provider)
// 3: timed out
});
navigator.geolocation.watchPosition(function(position) {
document.getElementById("currentLat").innerHTML = position.coords.latitude;
document.getElementById("currentLon").innerHTML = position.coords.longitude;
document.getElementById("distance").innerHTML =
calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
position.coords.latitude, position.coords.longitude);
});
}
};
// Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
// http://www.movable-type.co.uk/scripts/latlong.html
// Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
</script>
更新见运行代码
<input value='<span id='"currentLat'"></span>, <span id='"currentLon'"></span>' size="30" />
<input value="<span id='currentLat'></span>, <span id='currentLon'></span>" size="30" />
如果你想设置宽度和高度那么它应该是
style="height:100px;width:200px"
您有三个错别字(ID
属性的未闭引号)。那么您只需要设置span
的内容,而不是整个元素。
<input id="result" value="" size="30" />
<script>
var res = document.getElementById('result');
var lat = document.getElementById('currentLat');
var lon = document.getElementById('currentLon');
res.value = lat.innerText + ', ' + lon.innerText;
</script>
https://jsfiddle.net/zc7pLcoq/需要正确转义-
<input value='<span id="currentLat"></span>, <span id="currentLon"></span>'>
小提琴