主页 / 问题 / 823533
Accepted
Nasdomlan Urban3p
Asked:2020-05-05 17:55:52 +0800 CST2020-05-05 17:55:52 +0800 CST

谷歌地图 Firebase 标记更新

  • 772

请告诉我，有这样一个带有 FireBase 标记的地图代码，我怎样才能更新它们，而无需每秒重新加载页面？

<script>
    var config;
    function initialize() {
      var infowindow = new google.maps.InfoWindow();
      var map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(59.91378, 30.35894),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      // Initialize Firebase
      var config = {
        apiKey: "Ключ",
        authDomain: "Домен",
        databaseURL: "База",
        projectId: "ИД",
        storageBucket: "Ведро",
        messagingSenderId: "ИД"
      };
      firebase.initializeApp(config);
      //Create a node at firebase location to add locations as child keys
      var locationsRef = firebase.database().ref("users");
      var bounds = new google.maps.LatLngBounds();
      locationsRef.on('child_added', function(snapshot) {
        var data = snapshot.val();
        console.log(data);
        var marker = new google.maps.Marker({
          position: {
            lat: data.latitude,
            lng: data.longitude
          },
          map: map
        });
        bounds.extend(marker.getPosition());
        marker.addListener('click', (function(data) {
          return function(e) {
            infowindow.setContent(data.name);
            infowindow.open(map, this);
          }
        }(data)));
        map.fitBounds(bounds);
      });
    }
    </script>
    <style>
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBVFHz4EuuN1tiAtuTwTRAvI40998Pb2A&libraries=visualization&callback=initialize">
        </script>
    <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>
    <div id="map_canvas"></div>
javascript

1 个回答

  1. Best Answer
                      setInterval(function () {

  //Create a node at firebase location to add locations as child keys
  var locationsRef = firebase.database().ref("users");
  var bounds = new google.maps.LatLngBounds();
  locationsRef.on('child_added', function(snapshot) {
    var data = snapshot.val();
    console.log(data);
    var marker = new google.maps.Marker({
      position: {
        lat: data.latitude,
        lng: data.longitude
      },
      map: map
    });
    bounds.extend(marker.getPosition());
    marker.addListener('click', (function(data) {
      return function(e) {
        infowindow.setContent(data.name);
        infowindow.open(map, this);
      }
    }(data)));
        setInterval(function () {  marker.setMap(null); }, 999);

    //上面的这个函数解决了我的问题。

        marker.setMap(map);
  });
    }, 1000);
    • 0

相关问题