coordTransform.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>坐标转换</title>
  6. <script src="Common/mapClass/coordtransform.js"></script>
  7. <script>
  8. function btConvertClick(){
  9. var lng=document.getElementById("txtLng").value;
  10. var lat=document.getElementById("txtLat").value;
  11. var wgs84togcj02 = coordtransform.wgs84togcj02(lng, lat);
  12. document.getElementById("txtOutputX").value=wgs84togcj02[0];
  13. document.getElementById("txtOutputY").value=wgs84togcj02[1];
  14. var gcj02tobd09 = coordtransform.gcj02tobd09(wgs84togcj02[0], wgs84togcj02[1]);
  15. document.getElementById("txtOutputX1").value=gcj02tobd09[0];
  16. document.getElementById("txtOutputY1").value=gcj02tobd09[1];
  17. }
  18. //国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标)
  19. //百度经纬度坐标转国测局坐标
  20. //var bd09togcj02 = coordtransform.bd09togcj02(116.404, 39.915);
  21. //国测局坐标转百度经纬度坐标
  22. //var gcj02tobd09 = coordtransform.gcj02tobd09(116.404, 39.915);
  23. //wgs84转国测局坐标
  24. //var wgs84togcj02 = coordtransform.wgs84togcj02(116.404, 39.915);
  25. //国测局坐标转wgs84坐标
  26. //var gcj02towgs84 = coordtransform.gcj02towgs84(116.404, 39.915);
  27. //console.log(bd09togcj02);
  28. //console.log(gcj02tobd09);
  29. //console.log(wgs84togcj02);
  30. //console.log(gcj02towgs84);
  31. //result
  32. //bd09togcj02: [ 116.39762729119315, 39.90865673957631 ]
  33. //gcj02tobd09: [ 116.41036949371029, 39.92133699351021 ]
  34. //wgs84togcj02: [ 116.41024449916938, 39.91640428150164 ]
  35. //gcj02towgs84: [ 116.39775550083061, 39.91359571849836 ]
  36. </script>
  37. </head>
  38. <body>
  39. <div>
  40. <label>经纬度坐标</label>
  41. <input type="text" id="txtLng" value="121.419885">
  42. <input type="text" id="txtLat" style="display: inline" value="31.258565">
  43. <button onclick="btConvertClick()" style="display: inline">转换</button>
  44. </div>
  45. <div>
  46. <label>高德:</label>
  47. <input type="text" id="txtOutputX">
  48. <input type="text" id="txtOutputY" style="display: inline">
  49. </div>
  50. <div>
  51. <label>百度:</label>
  52. <input type="text" id="txtOutputX1">
  53. <input type="text" id="txtOutputY1" style="display: inline">
  54. </div>
  55. </body>
  56. </html>