Skip to content

Instantly share code, notes, and snippets.

@zyf0330

zyf0330/convert-wgs84-to-gcj02.html

Last active April 4, 2025 15:34
Show Gist options
  • Save zyf0330/3db1707a229c28659f254025ceaa0e68 to your computer and use it in GitHub Desktop.
Save zyf0330/3db1707a229c28659f254025ceaa0e68 to your computer and use it in GitHub Desktop.
Download ZIP
convert wgs84 to gcj02
Raw
convert-wgs84-to-gcj02.html
<html>
<head>
<meta charset="utf-8">
<title>GPS坐标（WGS-84） 换算 火星坐标（GCJ-02）</title>
</head>
<body>
<h2>GPS坐标（WGS-84） 换算 火星坐标（GCJ-02）</h2>
<br>
<p>GPS坐标（WGS-84） Lat: <input type="text" id="WGSLat" /> &emsp; Lon: <input type="text" id="WGSLon" /> &emsp; <button type="button" onclick="tomars ()">转换==></button> &emsp;
火星坐标（GCJ-02） Lat: <input type="text" id="GCJLat" /> &emsp; Lon: <input type="text" id="GCJLon" /></p>
<p><button type="button" onclick="gpxsto ()">转换GPX内容</button> &emsp; <input type="checkbox" onclick="gettime()" id="Clip"/> 截取部分 &emsp; 开始时间: <input type="datetime-local" id="begin_user_time" />
&emsp; 结束时间: <input type="datetime-local" id="end_user_time" /> &emsp; 时区: <input type="text" size="1" id="GMT" value="8"/> &emsp; <button type="button" onclick="gettime ()">刷新时间</button></p>
<p>注:截取功能仅支持截取中间段内容（截头去尾）。GPX使用UTC时间，时区设置仅作用于起讫时间的显示，方便调整，不会影响GPX内的时间数据。firefox不支持datetime-local对象。</p>
<p><textarea rows="30" cols="70" id="WGSgpx" placeholder="将 gpx 文件中 <trkseg> 标签内容填写到这里"></textarea> &emsp; &emsp; <textarea rows="30" cols="70" id="GCJgpx"></textarea></p>
<p><span id="demo"></span></p>
<p><span id="demo1"></span></p>
<script>
Pi = 3.14159265358979;
a = 6378245;
ee = 6.69342162296594E-03;
function tomars(){
var LatLon = new Array();
LatLon[0]=Number(document.getElementById("WGSLat").value);
LatLon[1]=Number(document.getElementById("WGSLon").value);
LatLon=wgs2gcj(LatLon[0],LatLon[1]);
document.getElementById("GCJLat").value=LatLon[0];
document.getElementById("GCJLon").value=LatLon[1];
}
function gettime(){
var wgsgpxstr;
wgsgpxstr = document.getElementById("WGSgpx").value;
parser=new DOMParser();
xmlDoc=parser.parseFromString(wgsgpxstr,"text/xml");
var trkptall=xmlDoc.getElementsByTagName("trkpt");
var beginTime,endTime;
beginTime=Date.parse(trkptall[0].getElementsByTagName("time")[0].childNodes[0].nodeValue) + document.getElementById("GMT").value*3600*1000;
endTime=Date.parse(trkptall[trkptall.length-1].getElementsByTagName("time")[0].childNodes[0].nodeValue) + document.getElementById("GMT").value*3600*1000;
//document.getElementById("demo").innerHTML=beginTime;
document.getElementById("begin_user_time").value=new Date (beginTime).toISOString().substr(0,16);
document.getElementById("end_user_time").value=new Date (endTime).toISOString().substr(0,16);
}
// TODO 直接使用原來的 xml，替换经纬度
function gpxsto (){
var wgsgpxstr,gcjgpxstr='';
var LatLon = new Array();
wgsgpxstr = document.getElementById("WGSgpx").value;
parser=new DOMParser();
xmlDoc=parser.parseFromString(wgsgpxstr,"text/xml");
gcjgpxstr=gcjgpxstr + " <trkseg>" + "\n";
var trkptall=xmlDoc.getElementsByTagName("trkpt");
document.getElementById("demo").innerHTML="总共" + trkptall.length + "个节点"
var beginTime,endTime,nowTime;
beginTime=Date.parse(document.getElementById("begin_user_time").value + ":00Z") - document.getElementById("GMT").value*3600*1000;
endTime=Date.parse(document.getElementById("end_user_time").value + ":59Z") - document.getElementById("GMT").value*3600*1000;
var clipValue
clipValue=document.getElementById("Clip").checked;
var ii;
ii=1;
for (var i=0;i<trkptall.length;i++){
if(clipValue && trkptall[i].getElementsByTagName("time")[0]){
nowTime=Date.parse(trkptall[i].getElementsByTagName("time")[0].childNodes[0].nodeValue);
}
if (clipValue && nowTime < beginTime){
continue;
}
if (clipValue && nowTime>endTime){
break;
}
LatLon[0]= Number(trkptall[i].getAttribute("lat"));
LatLon[1]= Number(trkptall[i].getAttribute("lon"));
LatLon=wgs2gcj(LatLon[0],LatLon[1]);
gcjgpxstr=gcjgpxstr + " <trkpt lat=\"" + LatLon[0] + "\" lon=\"" + LatLon[1] + "\">" + "\n";
if(trkptall[i].getElementsByTagName("ele")[0]) {
gcjgpxstr=gcjgpxstr + " <ele>" + trkptall[i].getElementsByTagName("ele")[0].childNodes[0].nodeValue + "</ele>" + "\n";
}
if(trkptall[i].getElementsByTagName("speed")[0]!=undefined){
gcjgpxstr=gcjgpxstr + " <speed>" + trkptall[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue + "</speed>" + "\n";
}
if(trkptall[i].getElementsByTagName("course")[0]!=undefined){
gcjgpxstr=gcjgpxstr + " <course>" + trkptall[i].getElementsByTagName("course")[0].childNodes[0].nodeValue + "</course>" + "\n";
}
if(trkptall[i].getElementsByTagName("time")[0]){
gcjgpxstr=gcjgpxstr + " <time>" + trkptall[i].getElementsByTagName("time")[0].childNodes[0].nodeValue + "</time>" + "\n";
}
gcjgpxstr=gcjgpxstr + " </trkpt>" + "\n"
document.getElementById("demo1").innerHTML="已处理" + ii + "个节点"
ii++;
}
gcjgpxstr=gcjgpxstr + " </trkseg>" + "\n";
document.getElementById("GCJgpx").value=gcjgpxstr;
}
function wgs2gcj(wgLat, wgLon){
var dLat, dLon, mgLat, mgLon, radLat, magic, sqrMagic;
dLat = transformLat(wgLon-105, wgLat-35);
dLon = transformLon(wgLon-105, wgLat-35);
radLat = wgLat / 180 * Pi;
magic = Math.sin(radLat);
magic = 1-ee * magic * magic;
sqrMagic = Math.sqrt(magic);
dLat = (dLat * 180) / ((a * (1-ee)) / (magic * sqrMagic) * Pi);
dLon = (dLon * 180) / (a / sqrMagic * Math.cos(radLat) * Pi);
mgLat = wgLat - dLat;
mgLon = wgLon - dLon;
return[mgLat.toFixed(14),mgLon.toFixed(14)];
}
function transformLat(x , y) {
var ret;
ret = -100 + 2 * x + 3 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret = ret + ((20 * Math.sin(6 * x * Pi) + 20 * Math.sin(2 * x * Pi)) * 2 / 3);
ret = ret + ((20 * Math.sin(y * Pi) + 40 * Math.sin(y / 3 * Pi)) * 2 / 3);
ret = ret + ((160 * Math.sin(y / 12 * Pi) + 320 * Math.sin(y * Pi / 30)) * 2 / 3);
return ret;
}
function transformLon(x , y) {
var ret;
ret = 300 + x + 2 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret = ret + ((20 * Math.sin(6 * x * Pi) + 20 * Math.sin(2 * x * Pi)) * 2 / 3);
ret = ret + ((20 * Math.sin(x * Pi) + 40 * Math.sin(x / 3 * Pi)) * 2 / 3);
ret = ret + ((150 * Math.sin(x / 12 * Pi) + 300 * Math.sin(x / 30 * Pi)) * 2 / 3);
return ret;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment