我们正在为失踪的孩子制作一个网站页面。
基本上，某人可以进入此页面，输入他们的地址，然后它会标记一个区域以显示他们已经检查了网络摄像头。
我已经通过 Google 云设置了一个 API，将权限设置为所需的权限，在 Firebase 中设置了我的数据库，然后对其进行了编码，但是当人们选择他们的房子时，它不会保留该标记。
刷新页面后标记消失了。
在 Firebase 的控制台中，我可以看到没有记录任何信息，因此当然没有任何信息可返回到网站。下面是我的代码。请帮忙！
<!DOCTYPE html>
<html>
<head>
<title>Community Search Map</title>
<style>
/* Style to ensure the map uses the full width and a fixed height */
#map {
height: 400px;
width: 100%;
}
/* Style the input boxes and button for better alignment and visibility */
.input-field, button {
margin-top: 10px;
width: 300px; /* Adjust width as necessary */
padding: 10px;
display: block; /* Stack the input fields vertically */
}
</style>
<script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyDY1hBVloKhVCIylwNlzwBqPBbhWzKnkHY",
authDomain: "zayden-421218.firebaseapp.com",
databaseURL: "https://zayden-421218-default-rtdb.firebaseio.com",
projectId: "zayden-421218",
storageBucket: "zayden-421218.appspot.com",
messagingSenderId: "44335894652",
appId: "1:44335894652:web:ecdc053194782b4655f9f9",
measurementId: "G-W925JW9SDF"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwGs-tc3ujSE5ajOrmVr1pvlNORfIVAr8&libraries=places&callback=initMap" async defer></script>
<script>
let map;
let geocoder;
let autocomplete;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 27.8503, lng: -82.135} // Centers the map on Fish Hawk, Florida
});
geocoder = new google.maps.Geocoder();
// Setup the Autocomplete
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('address'),
{types: ['geocode']}
);
fetchMarkers();
}
function fetchMarkers() {
const markersRef = firebase.database().ref('markers');
markersRef.on('value', (snapshot) => {
const markers = snapshot.val();
if (markers) {
Object.keys(markers).forEach((key) => {
const markerData = markers[key];
const marker = new google.maps.Marker({
position: {lat: markerData.lat, lng: markerData.lng},
map: map,
title: markerData.note
});
const infoWindow = new google.maps.InfoWindow({
content: `<h3>Note:</h3><p>${markerData.note}</p>`
});
marker.addListener('click', () => {
infoWindow.open(map, marker);
});
});
}
});
}
function geocodeAddress() {
const address = document.getElementById('address').value;
const note = document.getElementById('note').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
const marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// Create an info window to display the note
const infoWindow = new google.maps.InfoWindow({
content: `<h3>Note:</h3><p>${note}</p>`
});
// Add listener to marker to show info window when marker is clicked
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
// Save the marker in Firebase
const markersRef = firebase.database().ref('markers').push();
markersRef.set({
lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng(),
note: note
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body>
<div>
<input type="text" id="address" class="input-field" placeholder="Enter Address Here">
<input type="text" id="note" class="input-field" placeholder="Enter a note for this location">
<button onclick="geocodeAddress()">Mark Searched Area</button>
</div>
<div id="map"></div> <!-- The map will appear here -->
</body>
</html>
我尝试过搜索栏
根据要求提供一些指示 :) 如果添加到地图的标记在页面刷新后不会持续存在，请确保数据实际上已推送到 Firebase。
在 fetchMarkers 函数中，您正确地为标记节点设置了侦听器。确保在 initMap 函数中初始化地图后调用此函数 (fetchMarkers())。如果标记仍未出现，请将标记变量记录到控制台以检查是否正确检索数据：
console.log(markers);
在地理编码和 Firebase 调用中添加控制台日志和错误处理，以捕获任何失败或意外行为：
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
// Your existing code...
} else {
console.error('Geocode was not successful for the following reason: ' + status);
}
});
请更新您的帖子以反映记录的调试详细信息。