从Firebase导入地理数据到Google地图

Question

First, my data looks like this : 首先，我的数据如下所示：

then i have a google maps : 然后我有一个谷歌地图：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3,
    styles: [{
      featureType: 'poi',
      stylers: [{ visibility: 'off' }]  // Turn off points of interest.
    }, {
      featureType: 'transit.station',
      stylers: [{ visibility: 'off' }]  // Turn off bus stations, train stations, etc.
    }],
    disableDoubleClickZoom: true
  });

}


var firebase = new Firebase("https://dogouttest-1517327924086.firebaseio.com");

my firebase is correctly initialized with the code they provide. 我的Firebase已使用其提供的代码正确初始化。

here is my html : 这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <link type="text/css" rel="stylesheet" href="main.css">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5fGURVIJKUbxf_zu7EGTWLwM8tLZI-us&libraries=visualization&callback=initMap">
    </script>




    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAWk8PNIytV4zzHeeqi_Zos2LcpN1u_9qY",
    authDomain: "dogouttest-1517327924086.firebaseapp.com",
    databaseURL: "https://dogouttest-1517327924086.firebaseio.com",
    projectId: "dogouttest-1517327924086",
    storageBucket: "dogouttest-1517327924086.appspot.com",
    messagingSenderId: "830022432628"
  };
  firebase.initializeApp(config);
</script>


    <script src="main.js"></script>
</body>
</html>

i have no idea how can i import the firebase data to get it as marker in my google maps. 我不知道如何导入Firebase数据以将其作为我的Google地图中的标记。

Any help? 有什么帮助吗？

Thanks :) 谢谢：）

Answer 1

First, retrieve the points from firebase Database as Array format. 首先，从firebase数据库以数组格式检索点。 With this array will be created the markers. 使用此数组将创建标记。 For this, you need a reason to fire this function which you will load the data. 为此，您需要一个原因来触发此功能，以加载数据。 Assuming you will fire this with a button or document.onload event. 假设您将使用button或document.onload事件触发此事件。 Anyhow, this below functions will work upon your requirement: 无论如何，以下功能将根据您的要求工作：

function loadPointsFromFirebase (map) {  // pass the initialised map to the function
        var marker= {};
        var db = firebase.database();
        db.ref('clicks').ones('value', points => {
            points.forEach(point=>{
                marker = new google.maps.Marker({
                         map:map,
                         position: {
                              lat: point.val().lat,
                              lng: point.val().lng
                         }
                }) 
              marker.setMap(map) // Set market on the map 
             })
        })



}

从Firebase导入地理数据到Google地图

问题描述

1 个解决方案

解决方案1
0 2018-02-01 21:13:33

从Firebase导入地理数据到Google地图

问题描述

1 个解决方案

解决方案1 0 2018-02-01 21:13:33

解决方案1
0 2018-02-01 21:13:33