Electron 中的地理位置 API：获取和使用设备位置信息

1. Electron里的地理定位从哪来？

就像智能手机需要GPS芯片才能定位，Electron的地理位置能力其实源自Chromium的Geolocation API。当我们用navigator.geolocation对象时，实际上在底层调用了不同操作系统的定位服务——Windows用Geolocation API（需要支持WiFi/蓝牙），macOS用Core Location框架，Linux则依赖geoclue服务。

这里有个有趣的现象：很多开发者不知道Electron的位置数据获取其实分为两类情况：

• 用户手动授权的位置访问（需要浏览器权限弹窗）
• 开发者直接配置的系统级定位（需要代码配置）

2. 项目起手式：基础配置

让我们先搭建Electron基础项目：

mkdir electron-geolocation-demo
cd electron-geolocation-demo
npm init -y
npm install electron

在main.js主进程中需要配置关键权限：

// main.js 主进程配置
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      // 必须开启的配置项
      nodeIntegration: true,
      contextIsolation: false 
    }
  })

  // 允许访问地理位置
  mainWindow.webContents.session.setPermissionRequestHandler(
    (webContents, permission, callback) => {
      if (permission === 'geolocation') {
        callback(true) // 自动允许
      }
    }
  )
})

3. 基础定位实现

3.1 主进程调用方案

新建geolocation.js模块：

// geolocation.js - 主进程定位模块
const { app, BrowserWindow } = require('electron')

exports.getMainProcessLocation = () => {
  return new Promise((resolve, reject) => {
    const tempWindow = new BrowserWindow({ show: false })
    tempWindow.webContents.on('did-finish-load', () => {
      tempWindow.webContents.executeJavaScript(`
        navigator.geolocation.getCurrentPosition(
          position => position,
          error => { throw new Error(error.message) },
          { enableHighAccuracy: true, timeout: 10000 }
        )
      `).then(resolve).catch(reject)
    })
    tempWindow.loadURL('about:blank')
  })
}

调用示例：

const geolocation = require('./geolocation')

geolocation.getMainProcessLocation().then(pos => {
  console.log('主进程定位结果：', pos.coords)
})

3.2 渲染进程直连方案

在renderer.js渲染进程：

// renderer.js - 渲染进程直接调用
const getLocationBtn = document.getElementById('locate-btn')

getLocationBtn.addEventListener('click', async () => {
  try {
    const position = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 10000
      })
    })
    
    console.log('纬度:', position.coords.latitude)
    console.log('经度:', position.coords.longitude)
    console.log('海拔:', position.coords.altitude)
    console.log('精度范围:', position.coords.accuracy)
  } catch (err) {
    console.error('定位失败:', err.message)
  }
})

4. 高级功能实现

4.1 持续位置追踪

// renderer.js
let watchId = null

document.getElementById('start-track').addEventListener('click', () => {
  watchId = navigator.geolocation.watchPosition(position => {
    updateMap(position.coords) // 假设的地图更新方法
  }, err => {
    console.error('追踪出错:', err)
  }, {
    enableHighAccuracy: false,
    distanceFilter: 50 // 移动超过50米才触发
  })
})

document.getElementById('stop-track').addEventListener('click', () => {
  if (watchId) {
    navigator.geolocation.clearWatch(watchId)
    watchId = null
  }
})

4.2 双进程定位校验

// 主进程与渲染进程结果对比
async function verifyLocation() {
  const [mainPos, renderPos] = await Promise.all([
    geolocation.getMainProcessLocation(),
    new Promise(resolve => {
      navigator.geolocation.getCurrentPosition(resolve)
    })
  ])

  if (Math.abs(mainPos.coords.latitude - renderPos.coords.latitude) > 0.01) {
    console.warn('坐标差异超过阈值')
  }
}

5. 应用场景分析

1. 外卖配送系统：实时骑手定位功能需要持续的位置更新和位置比对机制
2. 智能硬件控制：工业平板设备通过GPS确定设备所在车间位置
3. 本地服务推荐：商场导购应用根据用户楼层位置推送店铺信息
4. 运动健康监测：记录跑步路径时要求高精度定位与低功耗的平衡

6. 技术优缺点对比

7. 核心注意事项

1. 权限策略：根据应用场景选择请求策略。教育类软件可以延后请求权限，而导航类应用需首次启动就申请
2. 错误处理模板：

function handleLocationError(err) {
  const errorMap = {
    1: '用户拒绝位置权限',
    2: '无法获取有效位置信息',
    3: '请求超时'
  }
  showDialog(errorMap[err.code] || '定位服务异常')
}

3. 隐私合规：在package.json中需要声明位置权限：

{
  "build": {
    "extraMetadata": {
      "geolocation": true
    }
  }
}

4. 调试技巧：在开发时可以使用模拟位置：

// 主进程调试代码
mainWindow.webContents.debugger.sendCommand(
  'Emulation.setGeolocationOverride', {
    latitude: 31.2304,
    longitude: 121.4737,
    accuracy: 50
  }
)

8. 实战总结

通过Electron的地理位置API，我们可以快速构建具备位置感知能力的桌面应用。关键点在于灵活运用主进程与渲染进程的不同实现策略，并妥善处理各种边界情况。需要特别注意用户隐私保护与现代浏览器安全策略的适配。

在实际项目中，建议将定位功能模块化：

// locationService.js 服务模块
export default {
  getCurrentPosition(option) {
    return this._hybridLocate(option)
  },

  async _hybridLocate(option) {
    try {
      return await this._rendererLocate(option)
    } catch {
      return await this._mainProcessLocate(option)
    }
  }
}