9.1 地理位置 API

9.1 地理位置API

地理位置API允许Web应用在用户授权后获取设备的地理位置信息，为LBS（基于位置的服务）应用提供了基础能力支持。本节将全面介绍Geolocation API的使用方法、最佳实践和高级应用场景。

核心API与基本用法

1. 权限请求与单次定位

// 检查API可用性
if (!navigator.geolocation) {
  alert("您的浏览器不支持地理位置功能");
  return;
}

// 获取当前位置（单次）
navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("定位成功:", position);
    showPosition(position);
  },
  (error) => {
    console.error("定位失败:", error.message);
    handleError(error);
  },
  {
    enableHighAccuracy: true,  // 是否高精度模式
    timeout: 10000,           // 超时时间(ms)
    maximumAge: 60000         // 缓存位置最大有效期
  }
);

function showPosition(position) {
  const { latitude, longitude, accuracy } = position.coords;
  console.log(`纬度: ${latitude}, 经度: ${longitude}, 精度: ±${accuracy}米`);
  
  // 在Google地图上显示位置
  const mapUrl = `https://maps.google.com/?q=${latitude},${longitude}`;
  document.getElementById('map-link').href = mapUrl;
}

function handleError(error) {
  const errorMessages = {
    1: "用户拒绝了位置请求",
    2: "无法获取位置信息",
    3: "请求超时"
  };
  alert(errorMessages[error.code] || "发生未知错误");
}

2. 持续位置监控

let watchId = null;

// 开始监听位置变化
function startTracking() {
  watchId = navigator.geolocation.watchPosition(
    (position) => {
      updatePositionMarker(position);
      logMovement(position);
    },
    (error) => {
      console.error("监控错误:", error);
      stopTracking();
    },
    {
      enableHighAccuracy: false,
      maximumAge: 3000,
      timeout: 5000
    }
  );
}

// 停止监控
function stopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
  }
}

// 使用示例
document.getElementById('start-btn').addEventListener('click', startTracking);
document.getElementById('stop-btn').addEventListener('click', stopTracking);

高级配置与优化

1. 定位参数详解

2. 精度优化策略

// 分阶段精度调整
function smartPositioning() {
  // 第一阶段：快速获取低精度位置
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      showQuickLocation(pos);
      
      // 第二阶段：获取高精度位置
      navigator.geolocation.getCurrentPosition(
        (accuratePos) => {
          updateAccurateLocation(accuratePos);
        },
        null,
        { enableHighAccuracy: true, timeout: 15000 }
      );
    },
    null,
    { enableHighAccuracy: false, timeout: 3000, maximumAge: 60000 }
  );
}

// 根据电量状态调整策略
function batteryAwareTracking() {
  navigator.getBattery().then(battery => {
    const options = {
      enableHighAccuracy: battery.charging,
      maximumAge: battery.charging ? 0 : 30000
    };
    
    watchId = navigator.geolocation.watchPosition(
      updatePosition,
      handleError,
      options
    );
    
    battery.addEventListener('chargingchange', () => {
      navigator.geolocation.clearWatch(watchId);
      batteryAwareTracking();
    });
  });
}

实际应用案例

1. 附近地点搜索

class NearbySearch {
  constructor() {
    this.lastPosition = null;
    this.API_KEY = 'YOUR_MAP_API_KEY';
  }
  
  async getCurrentLocation() {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        position => resolve(position.coords),
        error => reject(error),
        { timeout: 10000 }
      );
    });
  }
  
  async searchPlaces(type) {
    try {
      const { latitude, longitude } = await this.getCurrentLocation();
      this.lastPosition = { latitude, longitude };
      
      const response = await fetch(
        `https://maps.googleapis.com/maps/api/place/nearbysearch/json?` +
        `location=${latitude},${longitude}&radius=500&type=${type}&key=${this.API_KEY}`
      );
      
      return await response.json();
    } catch (error) {
      console.error("搜索失败:", error);
      return { results: [] };
    }
  }
}

// 使用示例
const searcher = new NearbySearch();
document.getElementById('restaurants-btn').addEventListener('click', async () => {
  const results = await searcher.searchPlaces('restaurant');
  displayResults(results);
});

2. 运动轨迹记录

class ActivityTracker {
  constructor() {
    this.positions = [];
    this.trackInterval = null;
  }
  
  startRecording() {
    this.positions = [];
    
    this.trackInterval = setInterval(() => {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.positions.push({
            coords: position.coords,
            timestamp: new Date(position.timestamp)
          });
          this.updateStats();
        },
        null,
        { enableHighAccuracy: true }
      );
    }, 5000); // 每5秒记录一次
  }
  
  stopRecording() {
    clearInterval(this.trackInterval);
    return this.calculateRoute();
  }
  
  calculateRoute() {
    if (this.positions.length < 2) return null;
    
    let totalDistance = 0;
    let startTime = this.positions[0].timestamp;
    let endTime = this.positions[this.positions.length - 1].timestamp;
    
    for (let i = 1; i < this.positions.length; i++) {
      totalDistance += this.calculateDistance(
        this.positions[i-1].coords,
        this.positions[i].coords
      );
    }
    
    return {
      points: this.positions.map(p => p.coords),
      totalDistance,
      duration: (endTime - startTime) / 1000,
      avgSpeed: totalDistance / ((endTime - startTime) / 3600000)
    };
  }
  
  calculateDistance(coords1, coords2) {
    // 使用Haversine公式计算球面距离
    const R = 6371e3; // 地球半径(米)
    const φ1 = coords1.latitude * Math.PI/180;
    const φ2 = coords2.latitude * Math.PI/180;
    const Δφ = (coords2.latitude - coords1.latitude) * Math.PI/180;
    const Δλ = (coords2.longitude - coords1.longitude) * Math.PI/180;
    
    const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
              Math.cos(φ1) * Math.cos(φ2) *
              Math.sin(Δλ/2) * Math.sin(Δλ/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    
    return R * c;
  }
}

隐私与安全实践

1. 权限管理策略

// 检查权限状态
async function checkPermission() {
  if (navigator.permissions) {
    try {
      const status = await navigator.permissions.query({ name: 'geolocation' });
      return status.state;
    } catch (e) {
      console.warn("权限API不可用:", e);
    }
  }
  return 'prompt'; // 默认返回需要请求
}

// 用户友好的权限请求
async function requestLocation() {
  const permission = await checkPermission();
  
  if (permission === 'granted') {
    return getCurrentPosition();
  } else if (permission === 'denied') {
    showPermissionInstructions();
    return null;
  } else {
    return new Promise((resolve) => {
      const modal = showPermissionModal({
        onAllow: () => {
          getCurrentPosition().then(resolve);
          modal.close();
        },
        onDeny: () => {
          modal.close();
          resolve(null);
        }
      });
    });
  }
}

2. 位置模糊化处理

// 对位置添加随机偏移
function addNoiseToPosition(coords, radiusMeters) {
  const radius = radiusMeters / 111300; // 转换为纬度度数
  
  // 生成随机角度和距离
  const angle = Math.random() * Math.PI * 2;
  const distance = Math.sqrt(Math.random()) * radius;
  
  return {
    latitude: coords.latitude + distance * Math.cos(angle),
    longitude: coords.longitude + distance * Math.sin(angle) / Math.cos(coords.latitude * Math.PI/180),
    accuracy: coords.accuracy + radiusMeters
  };
}

// 使用示例
navigator.geolocation.getCurrentPosition(position => {
  const blurred = addNoiseToPosition(position.coords, 500); // 500米半径模糊
  sendToServer(blurred); // 不发送精确位置
});

跨平台兼容方案

1. 回退定位策略

async function getFallbackPosition() {
  // 尝试IP定位
  try {
    const response = await fetch('https://ipapi.co/json/');
    const data = await response.json();
    return {
      coords: {
        latitude: data.latitude,
        longitude: data.longitude,
        accuracy: 5000, // IP定位精度较低
        altitude: null,
        altitudeAccuracy: null,
        heading: null,
        speed: null
      },
      timestamp: Date.now()
    };
  } catch (error) {
    // 最终回退到默认城市中心
    return {
      coords: {
        latitude: 39.9042,  // 北京
        longitude: 116.4074,
        accuracy: 50000,
        /* 其他字段为null */
      }
    };
  }
}

// 智能获取位置
function smartGeolocation() {
  return new Promise((resolve) => {
    if (!navigator.geolocation) {
      resolve(getFallbackPosition());
      return;
    }
    
    navigator.geolocation.getCurrentPosition(
      resolve,
      async (error) => {
        console.warn("精确定位失败，使用回退方案:", error);
        resolve(await getFallbackPosition());
      },
      { timeout: 8000 }
    );
  });
}

2. 混合定位技术

class HybridPositioning {
  constructor() {
    this.sources = [];
    
    if (navigator.geolocation) {
      this.sources.push(this.getGPSPosition.bind(this));
    }
    
    this.sources.push(this.getIPPosition.bind(this));
    this.sources.push(this.getWifiPosition.bind(this));
  }
  
  async getBestPosition() {
    const results = await Promise.allSettled(
      this.sources.map(source => source())
    );
    
    // 选择精度最高的结果
    const valid = results
      .filter(r => r.status === 'fulfilled' && r.value)
      .map(r => r.value);
    
    if (valid.length === 0) {
      return this.getDefaultCity();
    }
    
    return valid.reduce((best, current) => 
      current.coords.accuracy < best.coords.accuracy ? current : best
    );
  }
  
  getGPSPosition() {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        enableHighAccuracy: true,
        timeout: 10000
      });
    });
  }
  
  async getIPPosition() {
    const res = await fetch('https://ipapi.co/json/');
    const data = await res.json();
    return {
      coords: {
        latitude: data.latitude,
        longitude: data.longitude,
        accuracy: 5000
      }
    };
  }
  
  getWifiPosition() {
    // 实现WiFi定位（需要特定API）
    return Promise.resolve(null);
  }
  
  getDefaultCity() {
    return { coords: { latitude: 34.0522, longitude: -118.2437, accuracy: 50000 } };
  }
}

调试与性能优化

1. Chrome模拟定位

1. 打开开发者工具(F12)
2. 进入"传感器"面板
3. 覆盖地理位置：
   • 选择预设城市或手动输入坐标
   • 模拟移动轨迹

2. 性能监控指标

function trackPositioningPerformance() {
  const startTime = performance.now();
  
  navigator.geolocation.getCurrentPosition((position) => {
    const duration = performance.now() - startTime;
    const accuracy = position.coords.accuracy;
    
    console.log(`定位耗时: ${duration.toFixed(1)}ms, 精度: ${accuracy.toFixed(0)}米`);
    
    // 发送性能数据到分析平台
    sendAnalytics('geolocation_performance', {
      duration,
      accuracy,
      highAccuracy: position.coords.altitude !== null
    });
  });
}

// 采样记录（每10次记录一次）
let counter = 0;
navigator.geolocation.watchPosition(() => {
  if (++counter % 10 === 0) {
    trackPositioningPerformance();
  }
});

地理位置API为Web应用带来了丰富的场景可能，开发时应注意：

• 始终尊重用户隐私，明确说明位置用途
• 提供精确度合适的UI反馈
• 处理各种错误场景和降级方案
• 针对移动设备优化电量消耗
• 遵守各地数据保护法规（如GDPR）

通过合理使用Geolocation API及其增强技术，开发者可以构建出既功能强大又用户友好的位置感知型Web应用。