Opis
W tym samouczku pokazujemy, jak utworzyć interaktywną mapę za pomocą platformy aplikacji Firebase. Aby utworzyć mapę termiczną, kliknij na poniższej mapie różne lokalizacje.
Poniższa sekcja zawiera cały kod potrzebny do utworzenia mapy w tym samouczku.
/**
* Firebase config block.
*/
var config = {
apiKey: 'AIzaSyDX-tgWqPmTme8lqlFn2hIsqwxGL6FYPBY',
authDomain: 'maps-docs-team.firebaseapp.com',
databaseURL: 'https://maps-docs-team.firebaseio.com',
projectId: 'maps-docs-team',
storageBucket: 'maps-docs-team.appspot.com',
messagingSenderId: '285779793579'
};
firebase.initializeApp(config);
/**
* Data object to be written to Firebase.
*/
var data = {sender: null, timestamp: null, lat: null, lng: null};
function makeInfoBox(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '2px';
controlUI.style.marginBottom = '22px';
controlUI.style.marginTop = '10px';
controlUI.style.textAlign = 'center';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '100%';
controlText.style.padding = '6px';
controlText.textContent =
'The map shows all clicks made in the last 10 minutes.';
controlUI.appendChild(controlText);
}
/**
* Starting point for running the program. Authenticates the user.
* @param {function()} onAuthSuccess - Called when authentication succeeds.
*/
function initAuthentication(onAuthSuccess) {
firebase.auth().signInAnonymously().catch(function(error) {
console.log(error.code + ', ' + error.message);
}, {remember: 'sessionOnly'});
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
data.sender = user.uid;
onAuthSuccess();
} else {
// User is signed out.
}
});
}
/**
* Creates a map object with a click listener and a heatmap.
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3,
styles: [{
featureType: 'poi',
stylers: [{ visibility: 'off' }] // Turn off POI.
},
{
featureType: 'transit.station',
stylers: [{ visibility: 'off' }] // Turn off bus, train stations etc.
}],
disableDoubleClickZoom: true,
streetViewControl: false,
});
// Create the DIV to hold the control and call the makeInfoBox() constructor
// passing in this DIV.
var infoBoxDiv = document.createElement('div');
makeInfoBox(infoBoxDiv, map);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);
// Listen for clicks and add the location of the click to firebase.
map.addListener('click', function(e) {
data.lat = e.latLng.lat();
data.lng = e.latLng.lng();
addToFirebase(data);
});
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 16
});
initAuthentication(initFirebase.bind(undefined, heatmap));
}
/**
* Set up a Firebase with deletion on clicks older than expiryMs
* @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
*/
function initFirebase(heatmap) {
// 10 minutes before current time.
var startTime = new Date().getTime() - (60 * 10 * 1000);
// Reference to the clicks in Firebase.
var clicks = firebase.database().ref('clicks');
// Listen for clicks and add them to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
function(snapshot) {
// Get that click from firebase.
var newPosition = snapshot.val();
var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
var elapsedMs = Date.now() - newPosition.timestamp;
// Add the point to the heatmap.
heatmap.getData().push(point);
// Request entries older than expiry time (10 minutes).
var expiryMs = Math.max(60 * 10 * 1000 - elapsedMs, 0);
// Set client timeout to remove the point after a certain time.
window.setTimeout(function() {
// Delete the old point from the database.
snapshot.ref.remove();
}, expiryMs);
}
);
// Remove old data from the heatmap when a point is removed from firebase.
clicks.on('child_removed', function(snapshot, prevChildKey) {
var heatmapData = heatmap.getData();
var i = 0;
while (snapshot.val().lat != heatmapData.getAt(i).lat()
|| snapshot.val().lng != heatmapData.getAt(i).lng()) {
i++;
}
heatmapData.removeAt(i);
});
}
/**
* Updates the last_message/ path with the current timestamp.
* @param {function(Date)} addClick After the last message timestamp has been updated,
* this function is called with the current timestamp to add the
* click to the firebase.
*/
function getTimestamp(addClick) {
// Reference to location for saving the last click time.
var ref = firebase.database().ref('last_message/' + data.sender);
ref.onDisconnect().remove(); // Delete reference from firebase on disconnect.
// Set value to timestamp.
ref.set(firebase.database.ServerValue.TIMESTAMP, function(err) {
if (err) { // Write to last message was unsuccessful.
console.log(err);
} else { // Write to last message was successful.
ref.once('value', function(snap) {
addClick(snap.val()); // Add click with same timestamp.
}, function(err) {
console.warn(err);
});
}
});
}
/**
* Adds a click to firebase.
* @param {Object} data The data to be added to firebase.
* It contains the lat, lng, sender and timestamp.
*/
function addToFirebase(data) {
getTimestamp(function(timestamp) {
// Add the new timestamp to the record data.
data.timestamp = timestamp;
var ref = firebase.database().ref('clicks').push(data, function(err) {
if (err) { // Data was not written to firebase.
console.warn(err);
}
});
});
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" defer></script> <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
Zobacz, jak to działa
Możesz poeksperymentować z tym kodem w JSFiddle, klikając ikonę <> w prawym górnym rogu okna kodu.
<!DOCTYPE html>
<html>
<head>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>
<script>
/**
* Firebase config block.
*/
var config = {
apiKey: 'AIzaSyDX-tgWqPmTme8lqlFn2hIsqwxGL6FYPBY',
authDomain: 'maps-docs-team.firebaseapp.com',
databaseURL: 'https://maps-docs-team.firebaseio.com',
projectId: 'maps-docs-team',
storageBucket: 'maps-docs-team.appspot.com',
messagingSenderId: '285779793579'
};
firebase.initializeApp(config);
/**
* Data object to be written to Firebase.
*/
var data = {sender: null, timestamp: null, lat: null, lng: null};
function makeInfoBox(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '2px';
controlUI.style.marginBottom = '22px';
controlUI.style.marginTop = '10px';
controlUI.style.textAlign = 'center';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '100%';
controlText.style.padding = '6px';
controlText.textContent =
'The map shows all clicks made in the last 10 minutes.';
controlUI.appendChild(controlText);
}
/**
* Starting point for running the program. Authenticates the user.
* @param {function()} onAuthSuccess - Called when authentication succeeds.
*/
function initAuthentication(onAuthSuccess) {
firebase.auth().signInAnonymously().catch(function(error) {
console.log(error.code + ', ' + error.message);
}, {remember: 'sessionOnly'});
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
data.sender = user.uid;
onAuthSuccess();
} else {
// User is signed out.
}
});
}
/**
* Creates a map object with a click listener and a heatmap.
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3,
styles: [{
featureType: 'poi',
stylers: [{ visibility: 'off' }] // Turn off POI.
},
{
featureType: 'transit.station',
stylers: [{ visibility: 'off' }] // Turn off bus, train stations etc.
}],
disableDoubleClickZoom: true,
streetViewControl: false,
});
// Create the DIV to hold the control and call the makeInfoBox() constructor
// passing in this DIV.
var infoBoxDiv = document.createElement('div');
makeInfoBox(infoBoxDiv, map);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);
// Listen for clicks and add the location of the click to firebase.
map.addListener('click', function(e) {
data.lat = e.latLng.lat();
data.lng = e.latLng.lng();
addToFirebase(data);
});
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 16
});
initAuthentication(initFirebase.bind(undefined, heatmap));
}
/**
* Set up a Firebase with deletion on clicks older than expiryMs
* @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
*/
function initFirebase(heatmap) {
// 10 minutes before current time.
var startTime = new Date().getTime() - (60 * 10 * 1000);
// Reference to the clicks in Firebase.
var clicks = firebase.database().ref('clicks');
// Listen for clicks and add them to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
function(snapshot) {
// Get that click from firebase.
var newPosition = snapshot.val();
var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
var elapsedMs = Date.now() - newPosition.timestamp;
// Add the point to the heatmap.
heatmap.getData().push(point);
// Request entries older than expiry time (10 minutes).
var expiryMs = Math.max(60 * 10 * 1000 - elapsedMs, 0);
// Set client timeout to remove the point after a certain time.
window.setTimeout(function() {
// Delete the old point from the database.
snapshot.ref.remove();
}, expiryMs);
}
);
// Remove old data from the heatmap when a point is removed from firebase.
clicks.on('child_removed', function(snapshot, prevChildKey) {
var heatmapData = heatmap.getData();
var i = 0;
while (snapshot.val().lat != heatmapData.getAt(i).lat()
|| snapshot.val().lng != heatmapData.getAt(i).lng()) {
i++;
}
heatmapData.removeAt(i);
});
}
/**
* Updates the last_message/ path with the current timestamp.
* @param {function(Date)} addClick After the last message timestamp has been updated,
* this function is called with the current timestamp to add the
* click to the firebase.
*/
function getTimestamp(addClick) {
// Reference to location for saving the last click time.
var ref = firebase.database().ref('last_message/' + data.sender);
ref.onDisconnect().remove(); // Delete reference from firebase on disconnect.
// Set value to timestamp.
ref.set(firebase.database.ServerValue.TIMESTAMP, function(err) {
if (err) { // Write to last message was unsuccessful.
console.log(err);
} else { // Write to last message was successful.
ref.once('value', function(snap) {
addClick(snap.val()); // Add click with same timestamp.
}, function(err) {
console.warn(err);
});
}
});
}
/**
* Adds a click to firebase.
* @param {Object} data The data to be added to firebase.
* It contains the lat, lng, sender and timestamp.
*/
function addToFirebase(data) {
getTimestamp(function(timestamp) {
// Add the new timestamp to the record data.
data.timestamp = timestamp;
var ref = firebase.database().ref('clicks').push(data, function(err) {
if (err) { // Data was not written to firebase.
console.warn(err);
}
});
});
}
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>
</body>
</html>
Pierwsze kroki
Możesz utworzyć własną wersję mapy Firebase, korzystając z kodu podanego w tym samouczku. Aby zacząć to robić, utwórz nowy plik w edytorze tekstu i zapisz go jako index.html.
Przeczytaj poniższe sekcje, aby dowiedzieć się, jak wygląda kod, który możesz dodać do tego pliku.
Tworzenie mapy podstawowej
W tej sekcji opisano kod, który konfiguruje mapę podstawową. Przypomina to sposób tworzenia map pierwszych kroków z interfejsem Maps JavaScript API.
Skopiuj poniższy kod do pliku index.html. Ten kod wczytuje interfejs Maps JavaScript API i wyświetla mapę w trybie pełnoekranowym. Wczytuje także bibliotekę wizualizacji, której potrzebujesz później w samouczku do utworzenia mapy termicznej.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&libraries=visualization&callback=initMap">
</script>
<script>
// The JavaScript code that creates the Firebase map goes here.
</script>
</body>
</html>
Kliknij YOUR_API_KEY w przykładowym kodzie lub wykonaj instrukcje, aby uzyskać klucz interfejsu API. Zastąp YOUR_API_KEY kluczem interfejsu API swojej aplikacji.
W kolejnych sekcjach znajdziesz informacje o kodzie JavaScript, który tworzy mapę Firebase. Możesz skopiować kod, zapisać go w pliku firebasemap.js i odwoływać się do niego między tagami skryptu, tak jak poniżej.
<script>firebasemap.js</script>
Możesz też wstawić go bezpośrednio między tagami skryptu, tak jak w pełnym przykładowym kodzie na początku tego samouczka.
Dodaj poniższy kod do pliku firebasemap.js lub między pustymi tagami skryptu w pliku index.html. Jest to punkt początkowy, od którego uruchamia się program przez utworzenie funkcji, która inicjuje obiekt mapy.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3,
styles: [{
featureType: 'poi',
stylers: [{ visibility: 'off' }] // Turn off points of interest.
}, {
featureType: 'transit.station',
stylers: [{ visibility: 'off' }] // Turn off bus stations, train stations, etc.
}],
disableDoubleClickZoom: true,
streetViewControl: false
});
}
Aby korzystanie z tej klikalnej mapy termicznej było łatwiejsze, w powyższym kodzie użyto stylu mapy do wyłączenia ciekawych miejsc i stacji transportu publicznego (które po kliknięciu wyświetlają okno informacyjne). Wyłącza też powiększenie po dwukrotnym kliknięciu, co zapobiega przypadkowemu powiększaniu. Dowiedz się więcej o określaniu stylu mapy.
Po całkowitym wczytaniu interfejsu API parametr wywołania zwrotnego w poniższym tagu skryptu wykonuje funkcję initMap() w pliku HTML.
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&libraries=visualization&callback=initMap">
</script>
Dodaj kod poniżej, aby utworzyć element sterujący tekstem na górze mapy.
function makeInfoBox(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '2px';
controlUI.style.marginBottom = '22px';
controlUI.style.marginTop = '10px';
controlUI.style.textAlign = 'center';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '100%';
controlText.style.padding = '6px';
controlText.innerText = 'The map shows all clicks made in the last 10 minutes.';
controlUI.appendChild(controlText);
}
Dodaj poniższy kod w funkcji initMap po var map, aby wczytać tekstowe pole sterowania.
// Create the DIV to hold the control and call the makeInfoBox() constructor
// passing in this DIV.
var infoBoxDiv = document.createElement('div');
var infoBox = new makeInfoBox(infoBoxDiv, map);
infoBoxDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);
Wypróbuj teraz
Aby wyświetlić mapę Google utworzoną przez kod, otwórz plik index.html w przeglądarce.
Konfigurowanie Firebase
Aby umożliwić współpracę w tej aplikacji, musisz przechowywać kliknięcia w zewnętrznej bazie danych, do której mają dostęp wszyscy użytkownicy. Baza danych czasu rzeczywistego Firebase nadaje się do tego celu i nie wymaga żadnej wiedzy o SQL.
Najpierw zarejestruj się w usłudze Firebase (bezpłatnie).
Jeśli dopiero zaczynasz korzystać z Firebase, zobaczysz nową aplikację o nazwie „Moja pierwsza aplikacja”. Jeśli utworzysz nową aplikację, możesz nadać jej nową nazwę i nadać Firebase niestandardowy adres URL kończący się cyframi firebaseIO.com. Możesz na przykład nazwać aplikację „Mapa Firebase Anny” adresem URL https://janes-firebase-map.firebaseIO.com. Możesz użyć tego adresu URL, aby połączyć bazę danych z aplikacją JavaScript.
Dodaj poniższy wiersz po tagach <head> w pliku HTML, aby zaimportować bibliotekę Firebase.
<script src="www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
Dodaj do pliku JavaScript ten wiersz:
var firebase = new Firebase("<Your Firebase URL here>");
Przechowywanie danych o kliknięciach w Firebase
W tej sekcji opisujemy kod, który przechowuje w Firebase dane dotyczące kliknięć myszą na mapie.
Jeśli klikniesz na mapie każde kliknięcie myszą, poniższy kod tworzy globalny obiekt danych i zapisuje informacje o nim w Firebase. Ten obiekt rejestruje dane, takie jak długość i sygnatura czasowa kliknięcia, a także unikalny identyfikator przeglądarki, która utworzyła kliknięcie.
/**
* Data object to be written to Firebase.
*/
var data = {
sender: null,
timestamp: null,
lat: null,
lng: null
};
Poniższy kod rejestruje unikalny identyfikator sesji dla każdego kliknięcia, co pomaga kontrolować tempo ruchu na mapie zgodnie z regułami zabezpieczeń Firebase.
/**
* Starting point for running the program. Authenticates the user.
* @param {function()} onAuthSuccess - Called when authentication succeeds.
*/
function initAuthentication(onAuthSuccess) {
firebase.auth().signInAnonymously().catch(function(error) {
console.log(error.code + ", " + error.message);
}, {remember: 'sessionOnly'});
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
data.sender = user.uid;
onAuthSuccess();
} else {
// User is signed out.
}
});
}
Następna sekcja kodu nasłuchuje kliknięć na mapie, co dodaje obiekt podrzędny do bazy danych Firebase. W takim przypadku funkcja snapshot.val() pobiera wartości danych wpisu i tworzy nowy obiekt LatLng.
// Listen for clicks and add them to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
function(snapshot) {
var newPosition = snapshot.val();
var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
heatmap.getData().push(point);
}
);
Ten kod konfiguruje Firebase:
- Wykrywaj kliknięcia na mapie. Po kliknięciu aplikacja rejestruje sygnaturę czasową, a następnie dodaje element podrzędny do bazy danych Firebase.
- Usuwaj na mapie wszystkie kliknięcia starsze niż 10 minut, w czasie rzeczywistym.
/**
* Set up a Firebase with deletion on clicks older than expirySeconds
* @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
* which points are added from Firebase.
*/
function initFirebase(heatmap) {
// 10 minutes before current time.
var startTime = new Date().getTime() - (60 * 10 * 1000);
// Reference to the clicks in Firebase.
var clicks = firebase.database().ref('clicks');
// Listen for clicks and add them to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
function(snapshot) {
// Get that click from firebase.
var newPosition = snapshot.val();
var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
var elapsedMs = Date.now() - newPosition.timestamp;
// Add the point to the heatmap.
heatmap.getData().push(point);
// Request entries older than expiry time (10 minutes).
var expiryMs = Math.max(60 * 10 * 1000 - elapsed, 0);
// Set client timeout to remove the point after a certain time.
window.setTimeout(function() {
// Delete the old point from the database.
snapshot.ref.remove();
}, expiryMs);
}
);
// Remove old data from the heatmap when a point is removed from firebase.
clicks.on('child_removed', function(snapshot, prevChildKey) {
var heatmapData = heatmap.getData();
var i = 0;
while (snapshot.val().lat != heatmapData.getAt(i).lat()
|| snapshot.val().lng != heatmapData.getAt(i).lng()) {
i++;
}
heatmapData.removeAt(i);
});
}
Skopiuj cały kod JavaScript z tej sekcji do pliku firebasemap.js.
Tworzenie mapy termicznej
Kolejnym krokiem jest pokazanie mapy termicznej, która pokazuje widzom względną liczbę kliknięć w różnych lokalizacjach na mapie. Więcej informacji znajdziesz w przewodniku po mapach termicznych.
Dodaj poniższy kod w funkcji initMap(), aby utworzyć mapę termiczną.
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 16
});
Poniższy kod aktywuje funkcje initFirebase, addToFirebase i getTimestamp.
initAuthentication(initFirebase.bind(undefined, heatmap));
Zauważ, że jeśli klikniesz mapę termiczną, nie utworzy ona jeszcze punktów. Aby utworzyć punkty na mapie, musisz skonfigurować odbiornik mapy.
Tworzenie punktów na mapie termicznej
Poniższy kod dodaje odbiornik w obiekcie initMap(), po kodzie, który tworzy mapę. Kod odbiera dane z każdego kliknięcia, zapisuje lokalizację kliknięcia w bazie danych Firebase i wyświetla punkty na mapie termicznej.
// Listen for clicks and add the location of the click to firebase.
map.addListener('click', function(e) {
data.lat = e.latLng.lat();
data.lng = e.latLng.lng();
addToFirebase(data);
});
Wypróbuj teraz
Klikaj lokalizacje na mapie, aby tworzyć punkty na mapie termicznej.
Masz teraz w pełni funkcjonalną aplikację działającą w czasie rzeczywistym za pomocą Firebase i interfejsu Maps JavaScript API.
Gdy klikniesz mapę termiczną, długość i szerokość geograficzna kliknięcia powinny pojawić się w bazie danych Firebase. Możesz to sprawdzić, logując się na konto Firebase i przechodząc do karty danych w aplikacji. W tym momencie, gdy ktoś inny kliknie mapę, zarówno Ty, jak i ta osoba zobaczycie na niej punkty. Lokalizacja kliknięć nie zmienia się nawet po zamknięciu strony przez użytkownika. Aby sprawdzić działanie współpracy w czasie rzeczywistym, otwórz tę stronę w 2 osobnych oknach. Znaczniki powinny pojawić się w obu miejscach w czasie rzeczywistym.
Więcej informacji
Firebase to platforma aplikacji, która przechowuje dane w formacie JSON i synchronizuje dane ze wszystkimi połączonymi klientami w czasie rzeczywistym. Jest dostępny nawet wtedy, gdy aplikacja przejdzie w tryb offline. Ten samouczek używa swojej bazy danych czasu rzeczywistego.