堆栈溢出用户给了我一个上一个问题的答案 .
他为我的回答做了一个小提琴 . 他的小提琴完全符合我的要求，但出于某种原因，我不能让他的代码与我合作
这是小提琴http://jsfiddle.net/geocodezip/fnygnokw/6/?utm_source=website&utm_medium=embed&utm_campaign=fnygnokw
这是我的代码 . 我希望能够点击标记并让它显示我的数据库中的一些信息，这是他的代码能够完美地完成的 .
这是上一个问题的链接multiple markers on google maps from firebase database
如果有人能帮助我弄清楚他是如何做到的，我会非常感激 .
<!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: "",
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());
//Create a node at firebase location to add locations as child keys
//confirm(firebase.auth().currentUser)
//var a = localStorage.getItem('phoneNumber');
var locationsRef = firebase.database().ref("locations");
var pushRef = locationsRef.push()
// Create a new GeoFire key under users Firebase location
// replace var geoFire = new GeoFire(locationsRef.push()); with
var geoFire = new GeoFire(pushRef);
</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
//mapTypeId: google.maps.MapTypeId.ROADMAP
});
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, name };
_setGeoFire();
var locationsRef = firebase.database().ref("locations");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
var marker = new google.maps.Marker({
position: {
lat: data.User.l[0],
lng: data.User.l[1]
},
map: map,
// new google.maps.Size(42, 68)
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6) + "<br>" + data.User.g);
infowindow.open(map, this);
}
}(data)));
map.fitBounds(bounds);
});
infoWindow.setPosition(pos);
infoWindow.setContent('Current Location');
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");
pushRef.child("User").onDisconnect().remove();
}).catch(function(error) {
console.log(error);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>
