表单文本框

时间:2016-08-09 13:26:57

标签: javascript jquery html forms variables

我找到了一个将Northings和Eastings转换为经度和纬度的脚本,目前Northings和Eastings是硬编码到脚本中的变量(N& E)。我希望他们来自两个文本框。

目前这种转换是在加载页面时发生的,理想情况是当输入Northings和Eastings时,它会自动转换并将经度和纬度输入到单独的文本框中,准备上传到数据库。

在此先感谢,任何帮助都将受到赞赏,因为javascript不是我的强项。

http://jsfiddle.net/De6HP/7/

    // Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html
Number.prototype.toRad = function() {
   return this * Math.PI / 180;
}

Number.prototype.toDeg = function() {
   return this * 180 / Math.PI;
}

var E = 657177
var N = 172273

var a = 6377563.396, b = 6356256.909;              // Airy 1830 major & minor semi-axes
var F0 = 0.9996012717;                             // NatGrid scale factor on central meridian
var lat0 = 49*Math.PI/180, lon0 = -2*Math.PI/180;  // NatGrid true origin
var N0 = -100000, E0 = 400000;                     // northing & easting of true origin, metres
var e2 = 1 - (b*b)/(a*a);                          // eccentricity squared
var n = (a-b)/(a+b), n2 = n*n, n3 = n*n*n;

var lat=lat0, M=0;
do {
  lat = (N-N0-M)/(a*F0) + lat;

  var Ma = (1 + n + (5/4)*n2 + (5/4)*n3) * (lat-lat0);
  var Mb = (3*n + 3*n*n + (21/8)*n3) * Math.sin(lat-lat0) * Math.cos(lat+lat0);
  var Mc = ((15/8)*n2 + (15/8)*n3) * Math.sin(2*(lat-lat0)) * Math.cos(2*(lat+lat0));
  var Md = (35/24)*n3 * Math.sin(3*(lat-lat0)) * Math.cos(3*(lat+lat0));
  M = b * F0 * (Ma - Mb + Mc - Md);                // meridional arc

} while (N-N0-M >= 0.00001);  // ie until < 0.01mm

var cosLat = Math.cos(lat), sinLat = Math.sin(lat);
var nu = a*F0/Math.sqrt(1-e2*sinLat*sinLat);              // transverse radius of curvature
var rho = a*F0*(1-e2)/Math.pow(1-e2*sinLat*sinLat, 1.5);  // meridional radius of curvature
var eta2 = nu/rho-1;

var tanLat = Math.tan(lat);
var tan2lat = tanLat*tanLat, tan4lat = tan2lat*tan2lat, tan6lat = tan4lat*tan2lat;
var secLat = 1/cosLat;
var nu3 = nu*nu*nu, nu5 = nu3*nu*nu, nu7 = nu5*nu*nu;
var VII = tanLat/(2*rho*nu);
var VIII = tanLat/(24*rho*nu3)*(5+3*tan2lat+eta2-9*tan2lat*eta2);
var IX = tanLat/(720*rho*nu5)*(61+90*tan2lat+45*tan4lat);
var X = secLat/nu;
var XI = secLat/(6*nu3)*(nu/rho+2*tan2lat);
var XII = secLat/(120*nu5)*(5+28*tan2lat+24*tan4lat);
var XIIA = secLat/(5040*nu7)*(61+662*tan2lat+1320*tan4lat+720*tan6lat);

var dE = (E-E0), dE2 = dE*dE, dE3 = dE2*dE, dE4 = dE2*dE2, dE5 = dE3*dE2, dE6 = dE4*dE2, dE7 = dE5*dE2;
lat = lat - VII*dE2 + VIII*dE4 - IX*dE6;
var lon = lon0 + X*dE - XI*dE3 + XII*dE5 - XIIA*dE7;

Math.PI/180

window.onclick = function() {
    document.getElementById('result').innerHTML = 'longditude: ' + lon.toDeg();
    document.getElementById('result1').innerHTML = 'Latitude: ' + lat.toDeg();
}

2 个答案:

答案 0 :(得分:2)

您通过在blur事件上的文本框中添加事件侦听器,您可以让它自动计算正确更新时的纬度/经度。你的lat / long代码有点乱,所以我没有做太多变化,我把它包装在一个有两个输入的函数中。

我在顶部的代码中看到的是为blur添加调用validateInputs()的事件侦听器,以确保文本框中有两个有效输入,如果你愿意的话更新范围。

&#13;
&#13;
document.getElementById('txtInputN').addEventListener('blur', validateInputs);
document.getElementById('txtInputE').addEventListener('blur', validateInputs);

function validateInputs() {
  const valN = document.getElementById('txtInputN').value;
  const valE = document.getElementById('txtInputE').value;

  document.getElementById('result').innerHTML = ''; //Clear the textbox since we might not have valid input

  if (valN && valE) { //Make sure we have values
    if (valN >= 0 && valE >= 0) { //Due to implicit conversions, if it's text this won't pass
      calcResult(valN, valN) //We have valid inputs, so pass them here.
    }
  }
}

// Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html
Number.prototype.toRad = function() {
  return this * Math.PI / 180;
}

function calcResult(inputN, inputE) {

  Number.prototype.toDeg = function() {
    return this * 180 / Math.PI;
  }

  var E = 657177
  var N = 172273

  var a = 6377563.396,
    b = 6356256.909; // Airy 1830 major & minor semi-axes
  var F0 = 0.9996012717; // NatGrid scale factor on central meridian
  var lat0 = 49 * Math.PI / 180,
    lon0 = -2 * Math.PI / 180; // NatGrid true origin
  var N0 = -100000,
    E0 = 400000; // northing & easting of true origin, metres
  var e2 = 1 - (b * b) / (a * a); // eccentricity squared
  var n = (a - b) / (a + b),
    n2 = n * n,
    n3 = n * n * n;

  var lat = lat0,
    M = 0;
  do {
    lat = (N - N0 - M) / (a * F0) + lat;

    var Ma = (1 + n + (5 / 4) * n2 + (5 / 4) * n3) * (lat - lat0);
    var Mb = (3 * n + 3 * n * n + (21 / 8) * n3) * Math.sin(lat - lat0) * Math.cos(lat + lat0);
    var Mc = ((15 / 8) * n2 + (15 / 8) * n3) * Math.sin(2 * (lat - lat0)) * Math.cos(2 * (lat + lat0));
    var Md = (35 / 24) * n3 * Math.sin(3 * (lat - lat0)) * Math.cos(3 * (lat + lat0));
    M = b * F0 * (Ma - Mb + Mc - Md); // meridional arc

  } while (N - N0 - M >= 0.00001); // ie until < 0.01mm

  var cosLat = Math.cos(lat),
    sinLat = Math.sin(lat);
  var nu = a * F0 / Math.sqrt(1 - e2 * sinLat * sinLat); // transverse radius of curvature
  var rho = a * F0 * (1 - e2) / Math.pow(1 - e2 * sinLat * sinLat, 1.5); // meridional radius of curvature
  var eta2 = nu / rho - 1;

  var tanLat = Math.tan(lat);
  var tan2lat = tanLat * tanLat,
    tan4lat = tan2lat * tan2lat,
    tan6lat = tan4lat * tan2lat;
  var secLat = 1 / cosLat;
  var nu3 = nu * nu * nu,
    nu5 = nu3 * nu * nu,
    nu7 = nu5 * nu * nu;
  var VII = tanLat / (2 * rho * nu);
  var VIII = tanLat / (24 * rho * nu3) * (5 + 3 * tan2lat + eta2 - 9 * tan2lat * eta2);
  var IX = tanLat / (720 * rho * nu5) * (61 + 90 * tan2lat + 45 * tan4lat);
  var X = secLat / nu;
  var XI = secLat / (6 * nu3) * (nu / rho + 2 * tan2lat);
  var XII = secLat / (120 * nu5) * (5 + 28 * tan2lat + 24 * tan4lat);
  var XIIA = secLat / (5040 * nu7) * (61 + 662 * tan2lat + 1320 * tan4lat + 720 * tan6lat);

  var dE = (E - E0),
    dE2 = dE * dE,
    dE3 = dE2 * dE,
    dE4 = dE2 * dE2,
    dE5 = dE3 * dE2,
    dE6 = dE4 * dE2,
    dE7 = dE5 * dE2;
  lat = lat - VII * dE2 + VIII * dE4 - IX * dE6;
  var lon = lon0 + X * dE - XI * dE3 + XII * dE5 - XIIA * dE7;

  Math.PI / 180
  document.getElementById('result').innerHTML = 'Latitude: ' + lat.toDeg() + '<br /> Longitude: ' + lon.toDeg();
}
&#13;
Result is:
<div id="result"></div>
<br />
<span>N: </span>
<input type="text" id="txtInputN" />
<br />
<span>E: </span>
<input type="text" id="txtInputE" />
&#13;
&#13;
&#13;

答案 1 :(得分:0)

开始时的事情。

<div>
  Northings:
  <input id="north" type="text" onblur="Calculate()" /> 
  Eastings:
  <input id="east" type="text" onblur="Calculate()" />
</div>
<br/>
Result is:
<div id="longditude"></div>
<div id="latitude"></div>

http://jsfiddle.net/ptm1umad/