Question

我尝试使用geofirestore根据给定区域中的距离返回我的物品位置，并在尝试将geofirestore函数导入到我的组件中时始终出现“无法设置属性'_query'为null”的错误。 Geofirestore作为我的nuxt.config.js中的全局插件，如下：

plugins: ['@plugins/geofirestore.js],

我的plugins / geofirestore.js：

import Vue from 'vue';

import { GeoCollectionReference, GeoFirestore, GeoQuery, GeoQuerySnapshot } from 'geofirestore';

Vue.use(GeoCollectionReference, GeoFirestore, GeoQuery, GeoQuerySnapshot)

我在geofirestore / index.js中具有geofirestore功能：

let map;
const geoFirestore = new GeoFirestore(firestore);
const geoCollectionRef = geoFirestore.collection('posts');
let subscription;
const markers = {};
const radius = 1500;

// Query viewers' locations from Firestore
export function queryFirestore(location) {
  if (subscription) {
    console.log('Old query subscription cancelled');
    subscription();
    subscription = false;
  }

  const query = geoCollectionRef.near({
    center: new firebase.firestore.GeoPoint(location.lat, location.lng),
    radius
  });

  console.log('New query subscription created');
  subscription = query.onSnapshot((snapshot) => {
    console.log(snapshot.docChanges())
    snapshot.docChanges().forEach((change) => {
      switch (change.type) {
        case 'added':
          console.log('Snapshot detected added marker');
          return addMarker(change.doc.id, change.doc.data());
        case 'modified':
          console.log('Snapshot detected modified marker');
          return updateMarker(change.doc.id, change.doc.data());
        case 'removed':
          console.log('Snapshot detected removed marker');
          return removeMarker(change.doc.id, change.doc.data());
        default:
          break;
      }
    });
  });
}

// First find if viewer's location is in Firestore
export function getInFirestore(location) {
  location.lat = Number(location.lat.toFixed(1));
  location.lng = Number(location.lng.toFixed(1));
  const hash = geokit.Geokit.hash(location);

  geoCollectionRef.doc(hash).get().then((snapshot) => {
    let data = snapshot.data();
    if (!data) {
      data = {
        count: 1,
        coordinates: new firebase.firestore.GeoPoint(location.lat, location.lng)
      };
      console.log('Provided key is not in Firestore, adding document: ', JSON.stringify(data));
      createInFirestore(hash, data);
    } else {
      data.count++;
      console.log('Provided key is in Firestore, updating document: ', JSON.stringify(data));
      updateInFirestore(hash, data);
    }
  }, (error) => {
    console.log('Error: ' + error);
  });
}

// Create/set viewer's location in Firestore
export function createInFirestore(key, data) {
  geoCollectionRef.doc(key).set(data).then(() => {
    console.log('Provided document has been added in Firestore');
  }, (error) => {
    console.log('Error: ' + error);
  });
}

// Update viewer's location in Firestore
export function updateInFirestore(key, data) {
  geoCollectionRef.doc(key).update(data).then(() => {
    console.log('Provided document has been updated in Firestore');
  }, (error) => {
    console.log('Error: ' + error);
  });
}


// Initialize Map
export function initMap() {
  var userLocation;
  var mapCenter;

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 41.3083,
      lng: -72.9279
    },
    zoom: 8
  });


  // Get users location
  navigator.geolocation.getCurrentPosition((success) => {
    userLocation = {
      lat: success.coords.latitude,
      lng: success.coords.longitude
    };
    map.setCenter(userLocation);
    new google.maps.Marker({
      position: userLocation,
      map: map,
      icon: './assets/bluedot.png'
    });

    // Add viewer's location to Firestore
    getInFirestore(userLocation);
  }, console.log);


  map.addListener('idle', function () {
    var getCenter = map.getCenter()
    var center = {
      lat: getCenter.lat(),
      lng: getCenter.lng()
    };

    if (!mapCenter || geokit.Geokit.distance(mapCenter, center) > (radius * 0.7)) {
      mapCenter = center;
      queryFirestore(center);
    }
  });
}

// Add Marker to Google Maps
export function addMarker(key, data) {
  if (!markers[key]) {
    var infowindow = new google.maps.InfoWindow({
      content: data.count + ' people from this area have viewed this page'
    });

    markers[key] = new google.maps.Marker({
      position: {
        lat: data.coordinates.latitude,
        lng: data.coordinates.longitude
      },
      map: map
    });

    markers[key].addListener('click', function () {
      infowindow.open(map, markers[key]);
    });
  }
}

// Remove Marker to Google Maps
export function removeMarker(key) {
  if (markers[key]) {
    google.maps.event.clearListeners(markers[key], 'click');
    markers[key].setMap(null);
    markers[key] = null;
  }
}

// Update Marker on Google Maps
export function updateMarker(key, data) {
  if (markers[key]) {
    var infowindow = new google.maps.InfoWindow({
      content: data.count + ' people from this area have viewed this page'
    });

    markers[key].setPosition({
      lat: data.coordinates.latitude,
      lng: data.coordinates.longitude
    });

    google.maps.event.clearListeners(markers[key], 'click');

    markers[key].addListener('click', function () {
      infowindow.open(map, markers[key]);
    });
  } else {
    addMarker(key, data);
  }
}

export default { 
  queryFirestore,
  getInFirestore, 
  createInFirestore, 
  updateInFirestore, 
  initMap, 
  addMarker, 
  removeMarker, 
  updateMarker  
}

在我的Vue组件中，我试图导入以下功能：

<template>
    <div id="map"></div>
</template>

<script>
//import { GeoFirestore } from '~/plugins/geofirestore';
import * as geoFirestore from '@/geofirestore/index.js';

console.log(geoFirestore.queryFirestore());

  export default {

  }

</script>

<style>
#map {
  height: 100vh;
  width: 100vw;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

我在做什么错？我应该像我一样导出和导入这些geofirestore函数吗？是否应该在组件脚本标签中将它们转换为vue格式？谢谢您的帮助！

除此以外没有其他错误：

终端什么都没有...

如何将geofirestore函数导入Vue组件？

0 个答案: