腾讯地图坐标拾取器，js转WGS84保存到后台

最新推荐文章于 2025-03-30 16:48:46 发布

刘登辉

最新推荐文章于 2025-03-30 16:48:46 发布

阅读量1.7k

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_33215204/article/details/130508451

版权

该文章展示了一个使用HTML和JavaScript结合腾讯地图API创建的坐标拾取器，用户可以通过点击地图获取WGS84坐标，并转换及保存坐标和地址信息。代码示例中包括地图事件监听、坐标转换函数以及数据保存功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如上：

有个项目需要大量的地图坐标（wgs84），想到了用地图点击保存的方式来实现，html+js就可以搞定。

首先要申请一个腾讯地图的key

剩下的就是看文档，写js，写页面了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>腾讯地图坐标拾取器</title>
  <script src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.2/proj4.js"></script>
  <style>
    .getpoint-map{
	  	height: 100%;
		position: relative;
		flex: 1;
    }
	.getpoint{
		display: flex;
		flex: 1;
		height: calc(100vh);
		overflow: hidden;
		box-sizing: border-box;
	}

	.getpoint-info{
		width: 400px;
		padding: 25px 20px 0;
		background: #fff;
		box-sizing: border-box;
		overflow: auto;
		z-index: 1001;
		box-shadow: -4px 0 10px 0 rgba(0,0,0,.05);
	}
	.getpoint-info-item{
		margin-top: 20px;
		position: relative;
	}
	.getpoint-info-label{
		margin-bottom: 4px;
		font-size: 14px;
		color: #1b202c;
		letter-spacing: 0;
		line-height: 22px;
		font-weight: 600;
	}
	
	.el-input__inner{
		padding: 0 8px 0 8px;
		height: 34px;
		width: 100%;
		line-height: 34px;
		background: rgba(27,32,44,.03);
		border: 1px solid #ced2d9;
		border-radius: 4px;
		font-size: 14px;
		color: #1b202c;
		font-weight: 400;
	}


	.el-input__inner2{
		padding: 8px;
		height: auto;
		width: 100%;
		background: rgba(27,32,44,.03);
		border: 1px solid #ced2d9;
		border-radius: 4px;
		font-size: 14px;
		color: #1b202c;
		font-weight: 400;
		resize: vertical; /* 自动垂直拉伸 */
		min-height: 100px; /* 最小高度为100px */
		line-height: 1.5;
	}
	button {
		padding: 8px 16px;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
		background-color: #007bff;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	button:hover {
		background-color: #0069d9;
	}

	button:focus {
		outline: none;
	}

	.el-input__inner:focus {
		outline: none;
		box-shadow: none;
		border-color: #ced2d9;
	}

	.el-input__inner2:focus {
		outline: none;
		box-shadow: none;
		border-color: #ced2d9;
	}
	
  </style>
</head>
<body class="getpoint">
  <div class="getpoint-map" id="map">

  </div>
  <div class="getpoint-info">
	<div class="getpoint-info-item">
		<p class="getpoint-info-label">坐标</p>
		<input type="text" readonly="readonly" autocomplete="off" id="location" class="el-input__inner">

	</div>

	<div class="getpoint-info-item">
		<p class="getpoint-info-label">WGS84</p>
		<input type="text" readonly="readonly" autocomplete="off" id="WGS84" class="el-input__inner">

	</div>

	<div class="getpoint-info-item">
		<p class="getpoint-info-label">地址</p>
		<div class="tlbs-input getpoint-info-input el-input">
			<textarea readonly="readonly" id="address" class="el-input__inner2"></textarea>
		</div>
	</div>
		

	<div class="getpoint-info-item">
		<button onclick="savePoint()">确定保存</button>
	</div>
</div>

  <script>

	  document.addEventListener("keydown", function(event) {
		  if (event.keyCode === 13) {
			  savePoint();
		  }
	  });


	  const data = {
		  g_lat: 0,
		  g_lng: 0,
		  address: '',
		  w_lat: 0,
		  w_lng:0
  };

	var x_pi = 3.14159265358979324 * 3000.0 / 180.0
    var pi = 3.1415926535897932384626 //π
    var a = 6378245.0 // 长半轴
    var ee = 0.00669342162296594323 // 扁率



	function gcj02towgs84(lng, lat) {
        // GCJ02(火星坐标系) 转GPS84: param lng: 火星坐标系的经度: param lat: 火星坐标系纬度: return :
        var dlat = transformlat(lng - 105.0, lat - 35.0)
        var dlng = transformlng(lng - 105.0, lat - 35.0)
        var radlat = lat / 180.0 * this.pi
        var magic = Math.sin(radlat)
        magic = 1 - this.ee * magic * magic
        var sqrtmagic = Math.sqrt(magic)
        dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.pi)
        dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.pi)
        var mglat = lat + dlat
        var mglng = lng + dlng
        return [lng * 2 - mglng, lat * 2 - mglat]
    }




	function transformlat(lng, lat) {
        let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
        ret += (20.0 * Math.sin(6.0 * lng * this.pi) + 20.0 * Math.sin(2.0 * lng * this.pi)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(lat * this.pi) + 40.0 * Math.sin(lat / 3.0 * this.pi)) * 2.0 / 3.0
        ret += (160.0 * Math.sin(lat / 12.0 * this.pi) + 320 * Math.sin(lat * this.pi / 30.0)) * 2.0 / 3.0
        return ret
    }

    function transformlng(lng, lat) {
        let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
        ret += (20.0 * Math.sin(6.0 * lng * this.pi) + 20.0 *
            Math.sin(2.0 * lng * this.pi)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(lng * this.pi) + 40.0 *
            Math.sin(lng / 3.0 * this.pi)) * 2.0 / 3.0
        ret += (150.0 * Math.sin(lng / 12.0 * this.pi) + 300.0 *
            Math.sin(lng / 30.0 * this.pi)) * 2.0 / 3.0
        return ret
    }




    var map = new qq.maps.Map(document.getElementById("map"), {
      center: new qq.maps.LatLng(34.74167,113.66563), // 地图中心点坐标，可以自定义
      zoom: 15 // 地图缩放级别，可以自定义
    });
    var marker = new qq.maps.Marker({
      map: map,
      position: map.getCenter()
    });
    qq.maps.event.addListener(map, "click", function(event) {
      var latLng = event.latLng;
       marker.setPosition(latLng);
	   document.getElementById("location").value = latLng.lng+","+latLng.lat;
	   geocoder = new qq.maps.Geocoder({
       complete:function(result){
				var randomNum = Math.floor(Math.random() * 10) + 1;
				var res = result.detail.nearPois[randomNum];
				if (typeof res === "undefined") {
					console.log("myVariable is undefined");
					alert("获取失败，请重新选择！")
				}else{

					var address = res.address + res.name;
					var coord = gcj02towgs84(res.latLng.lng, res.latLng.lat); // 转换坐标

					data.g_lat = res.latLng.lat;
					data.g_lng = res.latLng.lng;
					data.address = address;
					data.w_lat = coord[1];
					data.w_lng = coord[0];

					document.getElementById("address").value = address;
					document.getElementById("location").value = res.latLng.lng+","+res.latLng.lat;
					document.getElementById("WGS84").value = coord[0] + "," + coord[1];
				}
			}
		});
		var coord=new qq.maps.LatLng(latLng.lat,latLng.lng);
		geocoder.getAddress(coord);
	   
 	});



	 function savePoint() {
		// 构造要提交的数据

		// 发起 AJAX POST 请求
		const xhr = new XMLHttpRequest();
		xhr.open('POST', '/api/savePoint'); // 这里需要修改为你的后端接口地址
		xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
		xhr.onreadystatechange = function() {
			if (xhr.readyState === XMLHttpRequest.DONE) {
			if (xhr.status === 200) {
				alert('保存成功');
			} else {
				alert('保存失败');
			}
			}
		};
		xhr.send(JSON.stringify(data));
	}

  </script>
</body>
</html>