javascript - 如何显示包含来自具有相同地理点的 firestore 集合中所有文档的数据的 googlemaps 标记

Question

我正在设计一个网页，该网页能够检索与 firestore 中的集合中的所有文档相似的标记字段 [geopoint]，并在信息窗口中显示所有不同文档的字段。但是，在检索标记时，我只能看到一个标记及其字段，而看不到其他文档的其余字段。合集截图: document1 document2 document3

On clicking the marker, only one document is being displayed on the map

代码如下:

<?php

include_once 'header.php';

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>

<div id="map"></div>

<!------ Include the above in your HEAD tag ---------->
<script>

   firebase.initializeApp({
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxxxx",
    projectId: "xxxxxxxxxxx"
   });

   const db = firebase.firestore();
   db.settings({timestampsInSnapshots: true});




    var map;
    var marker;
    var infowindow;
    var green_icon =  'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ;
    var purple_icon =  'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' ;




    function initMap() {

        var options = {
            zoom: 8,
            center:  {lat: 1.2921, lng: 36.8219}
        };

        var map = new google.maps.Map(document.getElementById('map'),options);


        function addMarker(coords, icon, content, animation){
            var marker = new google.maps.Marker({
                position:  coords,

                map: map,
                icon: icon,

                animation: animation
            });

            var infoWindow = new google.maps.InfoWindow({
                content: content

            });

            marker.addListener('click', function() {
                infoWindow.open(map,marker);
            });
        }



        db.collection('Nairobi').get().then((snapshot) => {

            // var data = snapshot.data();
            snapshot.docs.forEach(function(child){
                var name_loc = child.id;
                var loc = child.data().marker;
                var forward = child.data().ForwardPower;
                var reflected = child.data().ReflectedPower;

                var ups = child.data().UPSError;
                var upsDesc = child.data().UPSDesc;
                var trans = child.data().TransmitterError;
                var transDesc = child.data().TransDesc;


                    addMarker(
                        {lat: loc.latitude, lng: loc.longitude },
                        'http://maps.google.com/mapfiles/ms/icons/green-dot.png', '' +
                        `<h1> ${name_loc}</h1>` + "<br/>"
                        +  `<h2> Forward Power: ${forward} </h2>` 
                        + "<br/>" + `<h2> Reflected Power: ${reflected} </h2>`
                        + "<br/>" + `<h2> UPS Error: ${ups} </h2>`
                        + "<br/>" + `<h2> TransmitterError: ${trans} </h2>`

                    );

                console.log(child.id, child.data());
            });

   })
   }






</script>


<script async defer
        src="https://maps.googleapis.com/maps/api/js?language=en&key=[API KEY]&callback=initMap">
</script>

在网络控制台上，没有错误，我得到了文档数组，如下所示:console

Answer 1

这三个 Firestore 文档的标记值完全相同!因此，标记堆叠在您的 map 上，而您只能看到一个。

只需更改值，您就会看到三个不同的标记，因为您的代码可以正常工作。

<小时/>

另请注意，您可以这样做:

snapshot.forEach(function(child){...})

而不是

snapshot.docs.forEach(function(child){...})

参见https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot?authuser=0#for-each