- A+
所属分类:Web前端
此篇以百度地图为例
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); } } );
前半段是对传入经纬度进行处理,后续转化成功后可搭配构造点标记,连线,构造矢量图形等来展示地图