我正在设计一个网页,该网页能够检索与 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
最佳答案
这三个 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
关于javascript - 如何显示包含来自具有相同地理点的 firestore 集合中所有文档的数据的 googlemaps 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58834719/