Vue搭配百度地图使用(实现最基础的展示) 并转化坐标数据_vue使用百度地图根据坐标显示位置

写了个移动端本来用的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

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// 目标坐标系
                );

就这吧 我是看网站写的代码 将就看吧 毕竟我也没写过这个