создайте html с некоторыми функциями Firebase, в моем случае нам нужно найти некоторые автомобили на радио Geo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firebase</title>
<!-- Firebase -->
<script src="firebase.js"></script>
<!-- GeoFire -->
<script src="geofire.min.js"></script>
</head>
<body style="margin:0;padding:0;border:0;">
<script type="text/javascript">
var markers = new Array();
var markersArray = [];
var driverInvitations;
var diverInvited;
Ti.App.addEventListener('firebase:init', function(e) {
Ti.API.info('Geofire init');
Ti.API.info(e);
Ti.API.info('latitude :'+e.latitude);
Ti.API.info('longitude :'+e.longitude);
var latitude = parseFloat(e.latitude);
var longitude = parseFloat(e.longitude);
// Set the center
var center = [latitude, longitude];
// Query radius
var radiusInKm = 0;
// Get a reference to the Firebase public transit open data set
var transitFirebaseRef = new Firebase("https://xxx.firebaseio.com/");
// Create a new GeoFire instance, pulling data from the public transit data
var geoFire = new GeoFire(transitFirebaseRef.child("_geofire"));
/*************/
/* GEOQUERY */
/*************/
// Keep track of all of the vehicles currently within the query
var vehiclesInQuery = {};
// Create a new GeoQuery instance
var geoQuery = geoFire.query({
center : center,
radius : radiusInKm
});
geoQuery.on("ready", function() {
Ti.API.info("GeoQuery has loaded and fired all other events for initial data");
Ti.App.fireEvent('fbController:selectDriver');
});
/* Adds new vehicle markers to the map when they enter the query */
geoQuery.on("key_entered", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire enter driver, id ' + vehicleId + ', on location ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:addMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Moves vehicles markers on the map when their location within the query changes */
geoQuery.on("key_moved", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire move driver, id ' + vehicleId + ', moved to : ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:moveMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Removes vehicle markers from the map when they exit the query */
geoQuery.on("key_exited", function(vehicleId) {
Ti.API.info('Geofire exited driver, id ' + vehicleId);
Ti.App.fireEvent('fbController:removeMarker', {
id : vehicleId
});
});
});
</script>
</body>
</html>
затем в окне просмотра мы добавляем html в представление контейнера
var webview = Ti.UI.createWebView({
url: Ti.Filesystem.resourcesDirectory + '/webview/firebase/index.html',
width: 0,
height: 0,
top: 0,
left: 0,
visible: false
});
webview.addEventListener('load', function() {
Ti.App.fireEvent('firebase:init', {
latitude : latitude,
longitude : longitude
});
});
$.container.add(webview);
создайте некоторые события для связи с Firebase Webview
var Map = require('ti.map');
var mapview;
var annotations = [];
Ti.App.addEventListener('fbController:addMarker', function(e) {
Ti.API.info('Firebase add marker: ' + e.id);
annotations[e.id] = Map.createAnnotation({
latitude: e.latitude,
longitude: e.longitude,
image: '/images/icon-car.png'
});
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.addAnnotation(annotations[e.id]);
} else {
}
});
Ti.App.addEventListener('fbController:moveMarker', function(e) {
Ti.API.info('Firebase move marker: ' + e.id);
annotations[e.id].setLatitude(e.latitude);
annotations[e.id].setLongitude(e.longitude);
});
Ti.App.addEventListener('fbController:removeMarker', function(e) {
Ti.API.info('Firebase remove marker: ' + e.id);
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.removeAnnotation(annotations[e.id]);
delete annotations[e.id];
}
});
Все, что вам нужно, можете спросить меня, я использую это в приложении и работает хорошо, стараюсь улучшать каждый день, но с этой настройкой мы справились с задачей :), надеюсь, что это поможет, приветствия
person
Romeo Manzur
schedule
07.06.2016