将标记从firebase添加到网站中的谷歌地图答案

【问题标题】：Add markers from firebase to google map in website将标记从firebase添加到网站中的谷歌地图
【发布时间】：2018-09-01 17:53:37
【问题描述】：

Firebase 数据结构：

我需要使用这些 latlang 在谷歌地图中添加标记。

我的代码：

    <script>
    var map;

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 6.930274, lng: 79.861618},
          zoom: 16.5,
          panControl: false,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
          disableDoubleClickZoom: true,
        });

        var dbRef= firebase.database().ref('bins');
        dbRef.on('value', function(snapshot) {
            var snap = snapshot.val();
            var marker = new google.maps.Marker({
              position: {lat: snap.lat, lng: snap.lang},
              map: map
            });
        });
    }
</script>

这段代码运行时没有发生任何事情。

【问题讨论】：

标签： javascript google-maps firebase google-maps-markers marker

【解决方案1】：

看看这个

在该位置使用parseFloat()，因为firebase将数据返回为字符串。

position: {lat: parseFloat(snap.lat), lng: parseFloat(snap.lang)}

【讨论】：

谢谢，我还得把“value”改成“child_added” dbRef.on('value', function(snapshot)

【解决方案2】：

这是因为您没有访问 bins 的孩子，您必须使用 forEach 才能获取值：

 var dbRef= firebase.database().ref('bins');
    dbRef.on('value', function(snapshot) {
    snapshot.forEach(function(child) {
    var childs=child.val();
    var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lang},
          map: map
          });
       });
   });

【讨论】：

我必须添加 parseFloat()。谢谢！