Question

首先，我的数据如下：

然后我有一个谷歌地图：

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");

我的firebase已使用他们提供的代码正确初始化。

这是我的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>

我不知道如何导入firebase数据以将其作为我的谷歌地图中的标记。

任何帮助？

谢谢：）

Answer 1

首先，从firebase数据库中检索点作为数组格式。有了这个数组就会创建标记。为此，您需要启动此功能的原因，您将加载数据。假设您将使用按钮或document.onload事件触发此事件。无论如何，以下功能将满足您的要求：

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导入谷歌地图

1 个答案: