当前位置:首页 > 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获取的坐标取决于使用的服务提供商:

uniapp地图坐标系

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

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

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

相关文章

vue引入地图实现定位

vue引入地图实现定位

使用高德地图实现定位 安装高德地图的 Vue 插件 npm install @amap/amap-jsapi-loader --save 在 Vue 组件中引入并初始化地图 import AMap…

react如何引入高德地图

react如何引入高德地图

引入高德地图的基本步骤 在React项目中引入高德地图,需要通过高德地图的JavaScript API。以下是具体实现方式: 安装依赖 确保项目已初始化,若未安装@amap/amap-jsapi-l…

css地图制作

css地图制作

CSS地图制作方法 CSS地图通常指使用纯CSS技术实现的矢量地图或区域划分效果,常用于交互式界面或数据可视化。以下是几种常见实现方式: 使用SVG与CSS结合 通过SVG绘制地图路径,再用CSS控…

js实现手绘地图

js实现手绘地图

实现手绘地图的JavaScript方法 使用Canvas绘制基础地图 Canvas API适合绘制手绘风格的图形。通过设置线条的粗糙度和填充颜色,可以模拟手绘效果。 const canvas = d…

php实现搜索地图

php实现搜索地图

PHP 实现地图搜索功能 使用 PHP 实现地图搜索功能通常需要结合第三方地图 API(如 Google Maps、百度地图、高德地图等)。以下是几种常见的实现方法: 集成 Google Maps…

vue实现工位地图

vue实现工位地图

Vue 实现工位地图的方法 使用 SVG 或 Canvas 绘制地图 在 Vue 项目中可以通过 SVG 或 Canvas 技术绘制工位地图。SVG 适合静态或简单交互的地图,Canvas 适合高性能…