写了个移动端本来用的openlayers因为是公司技术栈也是刚学的吗 然后今天让改成百度地图....
大早上就开始翻网站浏览 幸亏功能不太复杂 就是展示地图并且根据后台返回的经纬度在地图上显示点位
使用前需要先去高德官网申请key值 高德官网
申请完后下载
npm i @amap/amap-jsapi-loader --save
然后初始化地图
initMap() {
AMapLoader.load({
"key": "申请的key值",
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// 处理格式
const coordinateStr = this.coord.replace(/POINT\(|\)/gi, '');
// 将剩下的字符串以空格为分隔符,分割成两个字符串
const [lng, lat] = coordinateStr.split(' ');
// 将两个字符串转换为数字类型
const lngNum = parseFloat(lng);
const latNum = parseFloat(lat);
// 将两个数字放在一个数组中
const Mapcenter = [lngNum, latNum];
// 得到其中心点
this.mapCenter = Mapcenter.slice(0, 2);
// console.log(this.mapCenter);
// 转化坐标系
var result = gcoord.transform(
this.mapCenter, // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.AMap// 目标坐标系
);
// 新坐标
var startLngLat = [result[0], result[1]];
// console.log(startLngLat);
// 标准图层
var layer = new AMap.TileLayer({
zooms: [3, 20], //可见级别
visible: true, //是否可见
opacity: 1, //透明度
zIndex: 0, //叠加层级
layers: [layer] //当只想显示标准图层时layers属性可缺省
})
// 初始化地图
this.map = new AMap.Map('bai-du-map', {
viewMode: "2D", // 是否为3D地图模式
zoom: 18, // 初始化地图级别
center: startLngLat, //中心点坐标 郑州
resizeEnable: true
});
// 创建点标记
var marker = new AMap.Marker({
position: startLngLat, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
// title: '北京',
icon: require('@/assets/index/dingwei-tu.png')
});
// 将创建的点标记添加到已有的地图实例:
this.map.add(marker);
}).catch(e => {
// console.log(e);
});
}
两个空格空出来那个是我处理数据格式因为后台返回的是 WGS84地球坐标系 是不是有点蒙 我当时也是
WGS84坐标系
即地球坐标系,国际上通用的坐标系。
设备一般包含GPS芯片或者北斗芯片获取的经纬度为WGS84地理坐标系。谷歌地图采用的是WGS84地理坐标系(中国范围除外,谷歌中国地图采用的是GCJ02地理坐标系。)
GCJ02坐标系
即火星坐标系,WGS84坐标系经加密后的坐标系。
出于国家安全考虑,国内所有导航电子地图必须使用国家测绘局制定的加密坐标系统,即将一个真实的经纬度坐标加密成一个不正确的经纬度坐标。
BD09坐标系
即百度坐标系,GCJ02坐标系经加密后的坐标系。搜狗坐标系、图吧坐标系等,估计也是在GCJ02基础上加密而成的。
各主流地图API采用的坐标系
高德MapABC地图API 火星坐标
腾讯搜搜地图API 火星坐标
阿里云地图API 火星坐标
灵图51ditu地图API 火星坐标
百度地图API 百度坐标
搜狐搜狗地图API 搜狗坐标
图吧MapBar地图API 图吧坐标
上面处理完后 因为后台返回的是WGS84坐标系 而高德是火星坐标 要转化一下 不然位置会有点偏差 使用gcoord 来转化数据 官网
gcoord主要解决了两个问题
GeoJSON是地理行业一种通用的数据格式,它本质上就是JSON,不过对字段有一些约定。
gcoord使用起来非常简单
例如从手机的GPS得到一个经纬度坐标,需要将其展示在百度地图上,则可以通过gcoord将当前坐标从WGS-84坐标系转换为BD-09坐标系
var result = gcoord.transform(
[ 116.403988, 39.914266 ], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.BD09 // 目标坐标系
);
console.log( result ); // [ 116.41661560068297, 39.92196580126834 ]
代码中使用
// 转化坐标系 将WGS84转化为AMap
var result = gcoord.transform(
this.mapCenter, // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.AMap// 目标坐标系
);
就这吧 我是看网站写的代码 将就看吧 毕竟我也没写过这个