vue中坐标系相互转换(高德GCJ02转为wgs84)

在工作中使用高德地图时遇到了从后台接口获取的经纬度在地图上显示有一定的偏差,而多数情况下高德使用的是GCJ-02坐标系 ,为了消除这个偏差,使用WGS-84坐标系来解决这一问题

WGS-84坐标系:也叫 地球坐标系,从GPS设备中取出的数据的坐标系,他是国际上通用的坐标系。

GCJ-02坐标系 :也叫 火星坐标系或国测坐标系,他是由中国国家测绘局独创的坐标体系;它是一种对经纬度数据的加密算法,

                        中国标准,从国行移动设备中定位获取的坐标数据使用这个坐标系

                        国家规定: 国内出版的各种地图系统(包括电子形式),必须至少采用GCJ-02对地理位置进行首次加密。

转换理由:

不同的坐标系之间不兼容,如GPS芯片设备定位获取到的经纬度之间在高德地图上描点显示,会发生偏移。

转换方式

发现了一个库 coordtransform

可以直接在vue项目中进行下载

下载方式:cnpm i -S coordtransform 或者 npm i -S coordtransform

引入

在自己所需要转换的页面进行引入

import coordtransform from 'coordtransform'

使用

WGS84转J02

coordtransform.wgs84togcj02(经度,纬度)

J02转WGS84

coordtransform.gcj02towgs84(经度,纬度)

 coordtansform库官方介绍:coordtransform - npm 

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue 是一种流行的 JavaScript 框架,用于构建用户界面。它本身并没有提供 WGS84GCJ02转换功能,但可以通过引入第三方库来实现。 一种常用的第三方库是 `coordtransform`,它是一个 JavaScript 坐标转换库,支持将 WGS84 坐标转换GCJ02 坐标。 首先,你需要安装该库。你可以使用 npm 包管理器,在命令行运行如下命令: ``` npm install coordtransform ``` 在 Vue 项目引入 `coordtransform` 库。你可以在需要进行坐标转换的组件,使用如下代码引入: ```javascript import coordtransform from 'coordtransform' ``` 接下来,你可以调用 `coordtransform.wgs84togcj02` 方法来完 WGS84GCJ02转换。该方法接受两个参数,分别是经度(longitude)和纬度(latitude),并返回一个包含转换后经纬度的数组。 下面是一个 Vue 组件实现 WGS84GCJ02 转换的示例代码: ```javascript import coordtransform from 'coordtransform' export default { data() { return { wgs84Longitude: 0, wgs84Latitude: 0, gcj02Longitude: 0, gcj02Latitude: 0 } }, methods: { convertWgs84ToGcj02() { const result = coordtransform.wgs84togcj02(this.wgs84Longitude, this.wgs84Latitude) this.gcj02Longitude = result[0] this.gcj02Latitude = result[1] } } } ``` 在这个示例,我们定义了两个输入框 `wgs84Longitude` 和 `wgs84Latitude` 用于输入 WGS84 坐标的经度和纬度。当用户点击转换按钮时,`convertWgs84ToGcj02` 方法将会被调用,完 WGS84GCJ02转换,并将结果保存在 `gcj02Longitude` 和 `gcj02Latitude` 。 需要注意的是,由于 GCJ02 是用于国地区的坐标系统,所以该转换只适用于国地区的坐标转换,对于其他地区的坐标转换可能不准确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值