添加从Firebase数据库中获取的所有标记

时间:2018-05-08 15:01:25

标签: javascript google-maps firebase google-maps-markers

从Firebase获取lat / lon位置列表后,我可以为最后一个用户添加标记,但我想从所有已提取的用户中添加所有标记。

Lat Lng fetched from firebase

$(document).ready(function(){
  var rootRef = firebase.database().ref().child("driversAvailable");
  rootRef.on("child_added",snap=>{
    var lat = snap.child("l").child("0").val();
    var lng = snap.child("l").child("1").val();
    console.log(name,phone);

    $('ol').append( '<li>' + lat +" : " + lng + '</li>' );

    var uluru = {lat: lat, lng: lng};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: karachi
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  });
});

1 个答案:

答案 0 :(得分:0)

您正在为每个位置创建一个新的地图实例,这就是您只看到最后一个标记的原因,它已添加到新地图中。

只需将地图创建移到侦听器之外,如下所示:

$(document).ready(function(){
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: karachi
    });
    var rootRef = firebase.database().ref().child("driversAvailable");
    rootRef.on("child_added",snap=>{
        var lat = snap.child("l").child("0").val();
        var lng = snap.child("l").child("1").val();
        console.log(name,phone);

        $('ol').append( '<li>' + lat +" : " + lng + '</li>' );

        var uluru = {lat: lat, lng: lng};
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    });
});