我正在尝试获取保存在Firebase实时数据库中的信息,并使用Google Maps API在地图上显示它们。这是我到目前为止的代码。现在,它将打开并使用html5地理位置API向用户显示当前位置,并使用Geofire将经纬度和经度坐标同步到Firebase实时数据库。
我不知道如何从Firebase检索信息并显示在Google地图上。如果有人可以帮助我,我将非常感激。
<script>
// counter for online drivers...
var loc_count = 0;
// markers array to store all the markers, so that we could remove marker when any driver goes offline and its data will be remove from realtime database...
var markers = [];
var map;
function initMap() { // Google Map Initialization...
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(1.558490, 103.638183), //map centered at UTM Skudai
// mapTypeId: 'terrain'
});
}
// This Function will add/display that marker on the map
function AddDriver(data) {
var LatLng = new google.maps.LatLng(parseFloat(data.val().lat),parseFloat(data.val().lng ));
// var service = new google.maps.places.PlacesService(data.val().email);
var marker = new google.maps.Marker({
//id:service,
position:LatLng,
map: map
});
//Create a new infowindow object
var infowindow = new google.maps.InfoWindow({
content: "The first marker"
});
// Attach it to the marker we've just added
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
markers[data.key] = marker; // add marker in the markers array...
document.getElementById("loc").innerHTML = loc_count;
}
// get firebase database reference...
var locationsRef = firebase.database().ref('lastOnline');
// this event will be triggered when a new object will be added in the database...
locationsRef.on('child_added', function (data) {
loc_count++;
AddDriver(data);
});
// this event will be triggered on location change of any driver...
locationsRef.on('child_changed', function (data) {
markers[data.key].setMap(null);
AddDriver(data);
});
// If any driver goes offline then this event will get triggered and we'll remove the marker of that driver...
locationsRef.on('child_removed', function (data) {
markers[data.key].setMap(null);
loc_count--;
document.getElementById("loc").innerHTML = loc_count;
});