从Firebase检索谷歌地图圆圈的位置数据

Retrieve locations data from Firebase for google maps circles

本文关键字：位置 置数据 Firebase 检索 谷歌地图      更新时间：2023-09-26

所以我遇到了这样的问题，即谷歌地图Javascript API无法解释位置数据（纬度、经度和半径（用于圆形标记））。我已经成功地从Firebase（警报测试）中检索到数据，但谷歌地图似乎有问题。我的朋友说，这是因为Firebase中存储的数据是字符串，但这并不是因为我用它进行了减法/乘法和其他数学测试。

    <!-- jQuery -->
    <script 
    src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <!-- Firebase -->
    <script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'>  </script>

    <title>View lightning map</title>
  <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
// RADIUS VARIABLE
var rad;
var lat; 
var log;
function retrieve (){

var x = 1;
var messagesRef = new Firebase("https://glaring-torch-4299.firebaseio.com/");
messagesRef.once('child_added', function(snapshot) {
    var data = snapshot.val();
    // UNTUK TEST
alert(data.latitude +" "+ data.longitude +" "+data.radius);
    lat = data.latitude;
    log = data.longitude;
    rad = data.radius;
alert (lat + " " + log + " " + radius);
    // UNTUK TEST
    x++;
  });
}

retrieve();

var latlang = {lat: lat, lng: log};

// center map
var citymap = {
  chicago: {
    center: latLang
  }
};
function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: latlang,
  });
  // Construct the circle for each value in citymap.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: latLang,
      radius: rad
    });
  }
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSdOKkpLmCe-
dMQ2XqfcReIvro396CGtk&signed_in=true&callback=initMap"></script>
  </body>
</html>

如果你的地图上只有一个圆圈，你可以删除citymap变量，你的代码可以简化：

// retrieve the data necessary for a single circle
function retrieve() {
    var messagesRef = new Firebase("https://glaring-torch-4299.firebaseio.com/");
    messagesRef.once('child_added', function (snapshot) {
        var data = snapshot.val();
        var lat = data.latitude;
        var lng = data.longitude;
        var rad = data.radius;
        initMap(lat, lng, rad);
    });
}
function initMap(lat, lng, radius) {
    // Create the map.
    var latLng = new google.maps.LatLng(lat, lng);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: latLng
    });
    // create the circle
    var circle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: {
            lat: lat,
            lng: lng
        },
        radius: parseFloat(radius)
    });
}

概念验证小提琴

好吧，伙计们，问题是firebase，因为谷歌地图在从firebase获得latlang数据之前就已经绘制了地图。

我所做的是在initmap函数中把var映射过程之前的firebase检索函数放在一起。非常感谢您的帮助，谢谢！

相关文章：