此篇以百度地图为例
1、去高德地图注册自己的key(注册流程可借鉴百度地图注册流程)
2、什么是坐标
- 地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。
- 火星坐标系——GCJ-02:中国国内使用的被强制加密后的坐标体系,高德坐标就属于该种坐标体系。
- 百度坐标系——BD-09:百度地图所使用的坐标体系,是在火星坐标系的基础上又进行了一次加密处理
3、坐标系转
为什么做图标转化,我们在接口处获取的坐标(经纬度)可能是GPS传入的,也可能是其他项目中使用的其他地图系获取的坐标,例如百度地图,腾讯地图等。这些放到不同的地图中会有偏差。导致精度不准。所以我们需要将坐标转化为我们当前使用地图所契合的经纬度。
1.在高德地图中使用 高德地图JS文档中的 API —— AMap.convertFrom() 来进行坐标转化
//经纬度转化 // 参数说明:需要转换的坐标,需要转换的坐标类型,转换成功后的回调函数 AMap.convertFrom( [that.comlng, that.comlat], "baidu",//这个填写的是 需要转化的坐标及类型 此处填写的是baidu就是转化百度坐标,此值可选三个【gps:GPS基础坐标】、【baidu:百度地图坐标】、【mapbar:图吧坐标】
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); } } );
前半段是对传入经纬度进行处理,后续转化成功后可搭配构造点标记,连线,构造矢量图形等来展示地图
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容