【发布时间】：2018-10-04 02:05:48
【问题描述】：
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<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>
<!-- Place this inside the HTML head; don't use async defer for now -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script>
var config = {
apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM",
authDomain: "carrier-35d7c.firebaseapp.com",
databaseURL: "https://carrier-35d7c.firebaseio.com",
projectId: "carrier-35d7c",
storageBucket: "carrier-35d7c.appspot.com",
messagingSenderId: "827792028763"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(locationsRef.push());
</script>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
var lat, lng;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
var pos = {lat: lat, lng: lng };
_setGeoFire();
var locationsRef = firebase.database().ref("locations");
locationsRef.on('child_added', function(snapshot) {
var bounds = new google.maps.LatLngBounds(); // declaration
var data = snapshot.val();
var marker = new google.maps.Marker({
position: {
lat: data.lat,
lng: data.lng
},
map: map
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(data.name + "<br>" + this.getPosition().toUrlValue(6) + "<br>" + data.message);
infowindow.open(map, this);
}
}(data)));
map.fitBounds(bounds);
});
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>我需要一些帮助，在谷歌地图上从我的 firebase 实时数据库中绘制多个坐标点。我正在使用 geofire 将用户的当前位置同步到数据库。另一个堆栈溢出用户给了我一些代码来使用，我把它放在我的程序中，但由于某种原因，它对他们有用，但对我不起作用。 How To Display Multiple Markers Coordinates Stored In Firebase Database On Google Maps。这是我几周前提出的问题的链接。如果有人能帮我弄清楚为什么这不起作用，我将不胜感激
【问题讨论】：
标签： javascript firebase google-maps-api-3 firebase-realtime-database geofire