使用用户个人电话号码为Google Map firebase上的每个标记添加多个标记-Java 学习之路

我需要一种方法来保存用户注册我的应用程序时的用户名，并在谷歌 Map 标记上显示与其位置相对应的相同名称，我需要所有标记和名称实时显示给所有用户，这样，用户就可以准确地看到 Map 上的人，并通过他们各自的用户名来识别他们 .

这是我的登录页面 . 这要求用户使用他们的电话号码登录，并使用发送给他们手机的短信代码 . 一旦他们确认了代码，就会将他们的电话号码保存到本地存储中 .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample FirebaseUI App</title>
  <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script>
  // Initialize Firebase
  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"
  };
  firebase.initializeApp(config);
</script>

    <script src="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.css" />
    <script type="text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: 'https://vkprakash.github.io/carryr/home.html',
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: '<your-tos-url>',
        // Privacy policy url/callback.
        privacyPolicyUrl: function() {
          window.location.assign('<your-privacy-policy-url>');
        }
      };
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start('#firebaseui-auth-container', uiConfig);
    </script>




    <script type="text/javascript">
      initApp = function() {
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            var displayName = user.displayName;
            var email = user.email;
            var emailVerified = user.emailVerified;
            var photoURL = user.photoURL;
            var uid = user.uid;


            var phoneNumber = user.phoneNumber;
            confirm(phoneNumber)

            var providerData = user.providerData;
            user.getIdToken().then(function(accessToken) {
              document.getElementById('sign-in-status').textContent = 'Signed in';
              document.getElementById('sign-in').textContent = 'Sign out';
              document.getElementById('account-details').textContent = JSON.stringify({
                displayName: displayName,
                email: email,
                emailVerified: emailVerified,
                phoneNumber: phoneNumber,
                photoURL: photoURL,
                uid: uid,
                accessToken: accessToken,
                providerData: providerData
              }, null, '  ');
            });

                 // var a = prompt("What is your phone number");
              var database = firebase.database();
              var fruits = database.ref('fruits');
              var data = {
                name: (phoneNumber),
                //count: (a)
              }
              database.ref('fruits').push(data)
               //localStorage.setItem("number", phoneNumber )
          } else {
            // User is signed out.
            document.getElementById('sign-out').addEventListener('click', function() {
    firebase.auth().signOut();
  });


            document.getElementById('sign-in-status').textContent = 'Signed out';
            document.getElementById('sign-in').textContent = 'Sign in';
            document.getElementById('account-details').textContent = 'null';
          }
        }, function(error) {
          console.log(error);
        });
      };
      window.addEventListener('load', function() {
        initApp()
      });
    </script>
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
    <div id="sign-in-status"></div>
    <div id="sign-in"></div>
    <div id="account-details"></div>
    <button id="sign-out">Sign Out</button>
   <button id="delete-account">Delete account</button>


  </body>
</html>

这是我的主页代码 . 这样做是因为它在 Map 上显示当前用户的所有位置，但是当我尝试将标记标签保存到本地存储的电话号码时，它会显示所有标记的确切电话号码 .

<!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>
      
    var a =  localStorage.getItem('phoneNumber')
    confirm(a)
     // var a = prompt("What is your phone number");
var database = firebase.database();
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});
var playersRef = firebase.database().ref("fruits");
//var phoneNumber = localStorage.getItem("number")
playersRef.orderByChild("name").equalTo(a).on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});
      // 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;
            name = "x"
            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 markerLabel = (a);
  var marker = new google.maps.Marker({
    position: {
      lat: data.User.l[0],
      lng: data.User.l[1]
     
    },
    map: map,
     label: {
      text: markerLabel
     // url: "sms://" + (a)
    
    }
  // label: markerLabel,
      
   // new google.maps.Size(42, 68)
  });
   google.maps.event.addListener(marker, 'click', function() {
        window.location.href = "sms://" + (a)
  
  });
  
  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>

我需要帮助找出一种方法，以便同时在每个用户的标记上显示每个用户的电话号码，以便其他用户可以在 Map 上查看他们的位置并通过他们的电话号码快速识别他们 .

使用用户个人电话号码为Google Map firebase上的每个标记添加多个标记

相关问题