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

效果如上：

有个项目需要大量的地图坐标（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.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>

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

地图坐标拾取/查询经纬度
前言略天安门(BD-09坐标系) 经度:116.403838 纬度:39.915077 石家庄人民广场(GCJ-02坐标系) 经度:114.514746 纬度:38.043622 工具经纬度查询 ...
日常生活小技巧 -- 百度地图坐标拾取
链接:百度坐标拾取系统打开百度地图->>地图开放平台->>开发->>坐标拾取器需要注意的是,百度地图新旧版本地图开发平台选项的位置不同. 新版本在底部: 旧 ...
layui+腾讯地图坐标点选取插件，支持地址关键字模糊/联想搜索、当前城市定位、地址地图标点联动
插件地址: TMap: layui+腾讯地图坐标点选取插件,支持地址关键字模糊/联想搜索.当前城市定位.地址地图标点联动实际项目中的案例图: html部分: <div class=" ...
百度地图坐标转成腾讯地图坐标
后台坐标是百度地图标记的,小程序是腾讯地图,客户发现一个楼盘在河里,觉得很奇怪,再看看其他的楼盘,位置都不对,之后才发现百度自成体系. 百度地图与腾讯地图坐标转换_James-CSDN博客转换结果会有 ...
高德地图、百度地图、腾讯地图坐标相互转换
高德地图.百度地图.腾讯地图坐标相互转换 1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS ...
GPS坐标转换腾讯地图坐标，并取地址
最近搞了一个APP手机定位功能,对地图标准大概做了初步了解.一般分三类: 一.WGS(World Geodetic System一1984 Coordinate System):国际上通用的地心坐标系 ...
高德地图怎么搜索marker_百度、高德、腾讯地图坐标认证怎么弄，3分钟轻松自助认证...
各位头条的朋友,各位长期关注我的无人店运营情况的朋友,大家好.上次跟大家分享了一些无人店引流的办法,有一些已经开店的朋友就很感兴趣,纷纷私信问我,具体怎么操作.这次有机会就跟大家讲一下,百度.高德地图 ...
vue获得腾讯坐标拾取器
申请腾讯key 然后给yourkey 在这里插入代码片 <template> <el-form:model="editForm":rules="rule ...
html微信定位转高德定位，JS微信公众号定位坐标转高德定位坐标，微信公众号定位精度转换高德精度，微信腾讯地图坐标转高德地图坐标
前言微信公众号获取的用户当前位置直接放到高德地图api上会偏差非常大,所以需要校正. 如下我分为三步调用:获取当前用户位置->转换成高德坐标->再初始化地图或者设置地图标点实现微信定 ...

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

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

最新文章

热门文章