我现在正在处理一个项目，我想知道是否有办法让地图上的标记可点击并让它打开一个包含来自火灾的特定用户导入信息的模态-基础。 ATM我将它的注释位置发布到Fire-base并检索它，并将其显示在地图上。
我已点击它并使其显示一个信息窗口，在每个标记上显示相同的内容。我很好奇我如何使用来自火基的数据来制作每个标记（对不起，我重复自己）。我将附上我下面的代码。我正在使用markercluster javascript来显示笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-database.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Marker Clusterer -->
<script type="text/javascript" src="markerclusterer.js"></script>
<!-- Meta and Title -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>geoNote</title>
<!-- Style -->
<style>
header {
position: fixed;
top: -30px;
height: 200px;
background: black;
width: 100%;
color: #1aaa8d;
text-align: center;
font-size: 49px;
margin-left: -8px;
font-family: "Century Gothic";
z-index: 2;
}
#map {
height: 100%;
z-index: 1;
}
html, body {
height: 100%;
margin: 0%;
padding: 0%;
font-family: "Century Gothic";
}
footer {
margin-left: -8px;
position: fixed;
bottom: 0;
background: black;
width: 100%;
color: white;
text-align: center;
font-size: 22px;
font-family: "Century Gothic";
z-index: 2;
}
/*making the navigation bar, styles*/
hr {
border: 3px solid #0f6654;
}
ul {
margin-top: 95px;
margin-left: -10px;
padding: 0;
width: 400px;
background-color: #1aaa8d;
position: fixed;
height: 500px;
overflow: auto;
top: 75px;
z-index: 2;
}
li a {
display: block;
color: white;
padding: 40px 70px;
font-size: 55px;
font-family: "Century Gothic";
text-decoration: none;
}
/*Modal Styles*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 3; /* Sit on top */
padding-top: 200px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
#aboutModal h1 {
text-align: center;
font-family: "Century Gothic";
font-size: 70px;
}
#settingsModal h1{
text-align: center;
font-family: "Century Gothic";
font-size: 70px;
}
#aboutModal p,
#settingsModal p{
font-family: "Century Gothic";
font-size: 50px;
}
#aboutModal a {
font-size: 60px;
color: #0f6654;
}
/*Theme slider*/
.switch {
position: relative;
display: inline-block;
width: 113px;
height: 68px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 52px;
width: 52px;
left: 4px;
bottom: 8px;
background-color: #1aaa8d;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: black;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
/* Rounded sliders */
.slider.round {
border-radius: 68px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<!--Header-->
<header>
<h1>geoNote</h1>
</header>
<!-- Map display -->
<div id="map"></div>
<!-- Navigation -->
<div id="navigation" class="toolbar">
<ul>
<li id="postNoteBTN"><a class="button">Post</a></li>
<hr>
<li id="aboutBTN"><a class="button">About</a></li>
<hr>
<li id="settingsBTN"><a class="button">Settings</a></li>
</ul>
</div>
<!-- Post modal -->
<div id="postModal" class="modal">
<div class="modal-content">
<form id="noteForm">
<div class="form-group">
<label for="messageSubject">Subject</label>
<input class="form-control" id="messageSubject" placeholder="Subject of the message">
</div>
<div class="form-group">
<label for="messageContent">Message</label>
<input class="form-control" id="messageContent" placeholder="Message content">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- About modal -->
<div id="aboutModal" class="modal">
<div class="modal-content">
<h1>About</h1>
<hr>
<p>GEOnote - a mobile app that allows its users
to share messages by posting them on a real-life map.
</p>
</br>
<a href="#" onclick="window.open('https://www.google.co.uk', '_system');">Visit GEOnote for more!</a>
</div>
</div>
<!-- Settings modal -->
<div id="settingsModal" class="modal">
<div class="modal-content">
<h1>Settings</h1>
<hr>
<p>Theme DAY/NIGHT</p>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
</div>
<!-- Modal Script -->
<script>
//post Modal
var postModal = document.getElementById('postModal');
var btn = document.getElementById("postNoteBTN");
btn.onclick = function () {
postModal.style.display = "block";
}
//about Modal
var aboutModal = document.getElementById('aboutModal');
var aboutBtn = document.getElementById("aboutBTN");
aboutBtn.onclick = function () {
aboutModal.style.display = "block";
}
//settings Modal
var settingsModal = document.getElementById('settingsModal');
var settingsBtn = document.getElementById("settingsBTN");
settingsBtn.onclick = function () {
settingsModal.style.display = "block";
}
//Window click closes Modal
window.onclick = function (event) {
if (event.target == settingsModal) {
settingsModal.style.display = "none";
}
else if (event.target == aboutModal) {
aboutModal.style.display = "none";
}
else if (event.target == postModal) {
postModal.style.display = "none";
}
}
</script>
<!-- Map and Firebase -->
<script>
//Firebase initialization
var config = {...
};
firebase.initializeApp(config);
var note = firebase.database().ref('note/');
//Map initialization
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -28.024, lng: 140.887},
disableDefaultUI: true
});
infoWindow = new google.maps.InfoWindow;
//Geolocation initialization
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//Geolocation error handling
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
//Place note
var notes = [];
var cluster = new MarkerClusterer(map, notes)
note.on("child_added", function (snapshot) {
var position = snapshot.val();
console.log(position);
var latLng = new google.maps.LatLng(position.latitude, position.longitude);
var noteIcon = 'https://i.imgur.com/mwIEFMG.png';
var note = new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.BOUNCE,
icon: noteIcon
});
cluster.addMarker(note);
})
}
//Submit to database
var submitNote = function () {
var subject = $("#messageSubject").val();
var message = $("#messageContent").val();
var lat = localStorage.latitude;
var lon = localStorage.longitude;
note.push({
"subject": subject,
"message": message,
"latitude": lat,
"longitude": lon
});
}
$(window).load(function () {
$("#noteForm").submit(submitNote);
});
</script>
<!-- Google map API -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBg6cbfR9X1bz_peeYvhHibQAsGhwN9V7w&callback=initMap">
</script>
<!-- Footer -->
<footer>
<div id="location" ></div>
</footer>
</body>
</html>