效果如上：
有个项目需要大量的地图坐标（wgs84），想到了用地图点击保存的方式来实现，html+js就可以搞定。
首先要申请一个腾讯地图的key
剩下的就是看文档，写js，写页面了。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>腾讯地图坐标拾取器</title><script src="/api/js?v=2.exp&key=你的key"></script><script src="/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.0var 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.pivar magic = Math.sin(radlat)magic = 1 - this.ee * magic * magicvar 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 + dlatvar mglng = lng + dlngreturn [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.0ret += (20.0 * Math.sin(lat * this.pi) + 40.0 * Math.sin(lat / 3.0 * this.pi)) * 2.0 / 3.0ret += (160.0 * Math.sin(lat / 12.0 * this.pi) + 320 * Math.sin(lat * this.pi / 30.0)) * 2.0 / 3.0return 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.0ret += (20.0 * Math.sin(lng * this.pi) + 40.0 *Math.sin(lng / 3.0 * this.pi)) * 2.0 / 3.0ret += (150.0 * Math.sin(lng / 12.0 * this.pi) + 300.0 *Math.sin(lng / 30.0 * this.pi)) * 2.0 / 3.0return 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>
