当前位置:首页 > uni-app

uniapp地图坐标系

2026-02-06 16:17:13uni-app

uniapp地图坐标系

在uniapp中使用地图功能时,坐标系是一个关键概念。uniapp支持多种地图服务提供商,如高德地图、百度地图、腾讯地图等,不同地图服务商使用的坐标系可能不同。

常见坐标系类型

GCJ-02坐标系 也称为火星坐标系,是中国国家测绘局制定的坐标系标准。高德地图、腾讯地图等国内地图服务商使用此坐标系。该坐标系对WGS-84坐标系进行了一定偏移处理。

WGS-84坐标系 国际通用的GPS坐标系,谷歌地图等国际地图服务使用此坐标系。该坐标系是原始GPS设备获取的坐标数据。

BD-09坐标系 百度地图使用的坐标系,是在GCJ-02基础上进行的二次加密处理。使用百度地图时需要特别注意此坐标系转换。

uniapp中的坐标系处理

uniapp的map组件默认使用GCJ-02坐标系。如果需要使用其他坐标系,需要进行转换:

// WGS-84转GCJ-02示例
function wgs84ToGcj02(lng, lat) {
  const a = 6378245.0
  const ee = 0.00669342162296594323
  const dlat = transformLat(lng - 105.0, lat - 35.0)
  const dlng = transformLng(lng - 105.0, lat - 35.0)
  const radlat = lat / 180.0 * Math.PI
  let magic = Math.sin(radlat)
  magic = 1 - ee * magic * magic
  const sqrtmagic = Math.sqrt(magic)
  dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * Math.PI)
  dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * Math.PI)
  const mglat = lat + dlat
  const mglng = lng + dlng
  return [mglng, mglat]
}

坐标系转换注意事项

在实际开发中,如果涉及多地图服务切换,建议统一使用一种坐标系并在需要时进行转换。高德地图和腾讯地图SDK通常提供坐标系转换方法。

使用百度地图时需要特别注意,必须将其他坐标系转换为BD-09才能正确显示位置。百度地图JavaScript API提供了坐标转换接口:

// 使用百度地图API转换坐标
var convertor = new BMap.Convertor()
var pointArr = []
pointArr.push(new BMap.Point(lng, lat))
convertor.translate(pointArr, 3, 5, function(data) {
  if(data.status === 0) {
    var newPoint = data.points[0]
    // 使用转换后的坐标
  }
})

定位API的坐标系

uniapp的定位API获取的坐标取决于使用的服务提供商:

  • 使用高德定位服务返回GCJ-02坐标
  • 使用百度定位服务返回BD-09坐标
  • 使用系统原生定位可能返回WGS-84坐标

在开发定位相关功能时,需要明确所使用的定位服务及其返回的坐标系类型,确保与地图组件使用的坐标系一致。

uniapp地图坐标系

标签: 坐标系地图
分享给朋友:

相关文章

vue项目实现地图

vue项目实现地图

Vue 项目中实现地图功能 在 Vue 项目中集成地图功能可以通过多种方式实现,常见的有使用高德地图、百度地图或腾讯地图的 JavaScript API。以下是几种主流地图 API 的集成方法。…

vue实现地图距离

vue实现地图距离

Vue 中实现地图距离计算的方法 在 Vue 中实现地图距离计算通常需要集成第三方地图 API(如百度地图、高德地图或 Google Maps)。以下是几种常见的方法: 使用高德地图 API 高德…

vue实现地图导航

vue实现地图导航

使用高德地图API实现Vue地图导航 安装高德地图JavaScript API的Vue封装库 npm install @amap/amap-jsapi-loader --save 在Vue组件中引…

如何在react中嵌入高德地图

如何在react中嵌入高德地图

安装高德地图 JavaScript API 在项目中引入高德地图的 JavaScript API。可以通过在 public/index.html 中添加脚本标签实现: <script src=…

react native实现地图

react native实现地图

React Native 地图实现方法 安装依赖库 使用 react-native-maps 库实现地图功能,需要安装核心库和平台特定配置: npm install react-native-ma…

css制作地图

css制作地图

使用CSS制作地图的基本方法 通过CSS的伪元素、边框、阴影等属性可以创建简单的地图轮廓或区块效果。例如用div和border模拟地图边界: .map-container { width: 30…