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

Question

So i have had this problem where google maps Javascript API cant interpret the locations data (latitude, longitude and radius (for circle mark)).所以我遇到了这个问题，即 google maps Javascript API 无法解释位置数据（纬度、经度和半径（用于圆形标记））。 I have successfully retrieve the data from Firebase (alert test) but there seems to be a problem with google maps.我已成功从 Firebase（警报测试）检索数据，但 google 地图似乎存在问题。 My friend said that its due to data stored in Firebase are in strings but its not because i have tested by subtracting / multiplying and other maths stuffs with it.我的朋友说这是因为存储在 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>

Answer 1

If you will only ever have one circle on your map, you can remove the citymap variable and your code can be simplified:如果你的地图上只有一个圆圈，你可以删除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)
    });
}

proof of concept fiddle概念证明小提琴

Answer 2

Its okay guys, the problem is with firebase as google maps already drew the map before they get the latlang data from firebase.没关系，问题在于firebase，因为谷歌地图在从firebase获取latlang数据之前已经绘制了地图。

what i did was put firebase retrieval function before var map process together in the initmap function.我所做的是在 initmap 函数中将 firebase 检索函数放在 var map 进程之前。 Your help is much appreciated thank you!非常感谢您的帮助，谢谢！

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

问题描述

2 个解决方案

解决方案1
0 2015-11-18 22:39:47

解决方案2
0 已采纳 2015-11-23 16:24:46

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

问题描述

2 个解决方案

解决方案1 0 2015-11-18 22:39:47

解决方案2 0 已采纳 2015-11-23 16:24:46

解决方案1
0 2015-11-18 22:39:47

解决方案2
0 已采纳 2015-11-23 16:24:46