從 Firebase 為谷歌地圖圈檢索位置數據

Question

所以我遇到了這個問題，即 google maps Javascript API 無法解釋位置數據（緯度、經度和半徑（用於圓形標記））。 我已成功從 Firebase（警報測試）檢索數據，但 google 地圖似乎存在問題。 我的朋友說這是因為存儲在 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

如果你的地圖上只有一個圓圈，你可以刪除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)
    });
}

概念證明小提琴

Answer 2

沒關系，問題在於firebase，因為谷歌地圖在從firebase獲取latlang數據之前已經繪制了地圖。

我所做的是在 initmap 函數中將 firebase 檢索函數放在 var map 進程之前。 非常感謝您的幫助，謝謝！

從 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