如何在客户端初始化用于Firestore的GeoFire并实现GeoQueries查询？

我来帮你理清这个问题——你遇到的geofire is not defined错误，核心原因是新版的geofire-common和旧版geofire库的全局对象名称不一样，而且官方文档里的客户端实现细节确实需要结合库的正确用法来梳理。下面是完整的解决方案：

1. 修正库的引入方式 #

你之前用的geofire-common没有全局的geofire对象，它的全局暴露名称是geofireCommon。正确的CDN引入应该用它的UMD版本：

<!-- 先引入Firebase核心和Firestore脚本 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>

<!-- 引入geofire-common的UMD版本 -->
<script src="https://unpkg.com/geofire-common@6.0.0/dist/geofire-common.min.js"></script>

2. 完整的客户端实现流程 #

第一步：初始化Firebase客户端 #

确保你已经配置了Firebase项目，并完成初始化：

const firebaseConfig = {
  // 替换成你的Firebase项目配置
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

第二步：为文档添加地理哈希（Geohash） #

在存储带位置信息的文档时，需要同时存储坐标（lat/lng）和对应的geohash值（用于范围查询）：

// 示例：存储一个带位置的文档
const docData = {
  name: "示例地点",
  lat: 37.7853,
  lng: -122.4057,
  // 用geofireCommon生成geohash
  geohash: geofireCommon.geohashForLocation([37.7853, -122.4057])
};

db.collection("locations").add(docData);

第三步：执行地理查询 #

通过geofireCommon.queryBounds获取查询范围，结合Firestore的where条件过滤，最后再精确计算距离得到最终结果：

// 定义查询中心点和半径（单位：公里）
const center = [37.7853, -122.4057]; // 旧金山坐标
const radiusInKm = 10;

// 获取查询边界
const bounds = geofireCommon.queryBounds(center, radiusInKm);
const queryPromises = [];

// 遍历每个边界执行Firestore查询
bounds.forEach(bound => {
  const query = db.collection("locations")
    .where("geohash", ">=", bound[0])
    .where("geohash", "<=", bound[1]);
  queryPromises.push(query.get());
});

// 合并结果并过滤出真正在半径内的文档
Promise.all(queryPromises).then(snapshots => {
  const matchingDocs = [];
  snapshots.forEach(snapshot => {
    snapshot.docs.forEach(doc => {
      const data = doc.data();
      // 计算文档位置到中心点的距离
      const distance = geofireCommon.distanceBetween([data.lat, data.lng], center);
      if (distance <= radiusInKm) {
        matchingDocs.push({ id: doc.id, ...data });
      }
    });
  });
  console.log("符合条件的地点：", matchingDocs);
}).catch(err => {
  console.error("查询失败：", err);
});

3. 关键注意事项 #

• 性能优化：先通过geohash范围过滤可以大幅减少需要计算距离的文档数量，避免全表扫描。
• 框架项目建议：如果你用React、Vue等现代框架，推荐通过npm安装geofire-common，然后用ES模块导入：

  npm install geofire-common
  

  导入方式：

  import { queryBounds, distanceBetween, geohashForLocation } from 'geofire-common';
  

内容的提问来源于stack exchange，提问作者sychordCoder