高德地图 其他地图坐标系转化为高德坐标系
此篇以百度地图为例
1、去高德地图注册自己的key(注册流程可借鉴百度地图注册流程)
2、什么是坐标
-
地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。
-
火星坐标系——GCJ-02:中国国内使用的被强制加密后的坐标体系,高德坐标就属于该种坐标体系。
-
百度坐标系——BD-09:百度地图所使用的坐标体系,是在火星坐标系的基础上又进行了一次加密处理
3、坐标系转
为什么做图标转化,我们在接口处获取的坐标(经纬度)可能是GPS传入的,也可能是其他项目中使用的其他地图系获取的坐标,例如百度地图,腾讯地图等。这些放到不同的地图中会有偏差。导致精度不准。所以我们需要将坐标转化为我们当前使用地图所契合的经纬度。
1.在高德地图中使用 高德地图JS文档中的 API —— AMap.convertFrom() 来进行坐标转化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | //经纬度转化 // 参数说明:需要转换的坐标,需要转换的坐标类型,转换成功后的回调函数 AMap.convertFrom( [that.comlng, that.comlat], "baidu" , //这个填写的是 需要转化的坐标及类型 此处填写的是baidu就是转化百度坐标,此值可选三个【gps:GPS基础坐标】、【baidu:百度地图坐标】、【mapbar:图吧坐标】<br> function (status, result) { if (result.info === "ok" ) { that.gaodeMaplng = result.locations[0].lng; that.gaodeMaplat = result.locations[0].lat; // console.log(result.locations[0]); // 构造点标记 var marker = new AMap.Marker({ label: { content: `${that.compText}` }, icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" , position: [result.locations[0].lng, result.locations[0].lat], anchor: "bottom-center" , }); // 构造矢量圆形 var circle = new AMap.Circle({ center: new AMap.LngLat( `${result.locations[0].lng}`, `${result.locations[0].lat}` ), // 圆心位置 radius: 1000, //半径 strokeColor: "rgb(253,221,155)" , //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 3, //线粗细度 fillColor: "rgb(253,221,155)" , //填充颜色 fillOpacity: 0.35, //填充透明度 }); // 将以上覆盖物添加到地图上 // add方法可以传入一个覆盖物数组,将点标记和矢量圆同时添加到地图上 map.add(marker); map.add(circle); } } ); |
前半段是对传入经纬度进行处理,后续转化成功后可搭配构造点标记,连线,构造矢量图形等来展示地图
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!