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

Question

我正在设计一个网页，该网页将能够检索一个标记字段 [geopoint]，该字段对于来自 firestore 的集合中的所有文档都是相似的，并在信息窗口中显示所有不同文档的字段。但是，在检索标记时，我只能看到一个标记及其字段，而看不到其他文档的其余字段。 合集截图： 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>

在 Web 控制台上，没有错误，我得到了如下所示的文档数组：console

Answer 1

三个 Firestore 文档的值与 markers 完全相同！所以标记堆叠在您的地图上，您只能看到一个。

只需更改值，您就会看到三个不同的标记，因为您的代码有效。

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

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

而不是

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

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

Answer 2

作为雷诺回答的补充，这确实是预期的行为，默认情况下 Google 地图 API 仅显示顶部标记。例如，要实现理想的行为，您可以使用 OverlappingMarkerSpiderfier 库。

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

How to display a googlemaps marker containing data from all documents in a firestore collection with the same geopoint

javascript

google-maps

google-maps-markers

firebase

google-cloud-firestore