javascript - 如何在我的 JavaScript HTML 中调用 div,以便在页面上显示的每个帖子上绘制地图?
问题描述
所以这有点复杂。我正在使用 Firebase Firestore 完成大学作业。基本上我有一个页面显示在单独的页面上填写的信息,我的数据库中的每个条目都有一个纬度和经度值,我希望在显示的每个条目上都有一个地图,所以在我正在写的 JavaScript 文件夹中HTML 我希望如何显示信息我有地图 div(我将使用 doc.id 作为唯一标识符,但目前我只是想让地图正常工作)。
我收到此错误
"Map: Expected mapDiv of type Element but was passed null."
我认为是因为它找不到我的 div 所以我的问题是如何让它找到 div?
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
maleRef.onSnapshot(snapshot => {
let hacks = [];
snapshot.forEach(doc => {
hacks.push({...doc.data(), id: doc.id})
});
// console.log(hacks);
let html = ``;
hacks.forEach(hacks => {
html +=
`
<div class="col-6">
<div class="item">
<h4 id="itemName">${hacks.name}</h4>
<hr>
<div class="row">
<div class="col-4">
<img id="itemPhoto" src="${hacks.photo}">
</div>
<div id="itemInfo" class="col-8">
<p><b>Age:</b></p>
<p>${hacks.age}</p><br><br>
<p><b>Gender:</b></p>
<p>${hacks.gender}</p><br><br>
<p><b>Email:</b></p>
<p>${hacks.email}</p><br><br>
<p><b>Number:</b></p>
<p>${hacks.number}</p><br><br>
<p><b>Address:</b></p>
<p>${hacks.address}</p>
</div>
</div>
<div style="width=80%; height: 200px;" id="map"></div>
</div>
</div>
`
document.querySelector('.maleContainer').innerHTML = html;
});
});
这是我认为正确的脚本链接的顺序
<script src="/__/firebase/8.4.2/firebase-app.js"></script>
<script src="/__/firebase/8.4.1/firebase-firestore.js"></script>
<script src="/__/firebase/8.4.1/firebase-functions.js"></script>
<script src="/__/firebase/init.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap"></script>
<script src="js/permition.js"></script>
解决方案
只是为了回答这个问题,我将把修复它的内容放在最后。感谢 geocodezip,他帮助我解决了这个问题。基本上,正如geocodezip所说,地图在添加帖子之前正在初始化,因此地图div不存在以解决我删除API链接上的回调,然后将地图代码包装在一个函数中并在最后调用它们快照的
maleRef.onSnapshot(snapshot => {
let hacks = [];
snapshot.forEach(doc => {
hacks.push({...doc.data(), id: doc.id})
});
// console.log(hacks);
let html = ``;
hacks.forEach(hacks => {
html +=
`
<div class="col-6">
<div class="item">
<h4 id="itemName">${hacks.name}</h4>
<hr>
<div class="row">
<div class="col-4">
<img id="itemPhoto" src="${hacks.photo}">
</div>
<div id="itemInfo" class="col-8">
<p><b>Age:</b></p>
<p>${hacks.age}</p><br><br>
<p><b>Gender:</b></p>
<p>${hacks.gender}</p><br><br>
<p><b>Email:</b></p>
<p>${hacks.email}</p><br><br>
<p><b>Number:</b></p>
<p>${hacks.number}</p><br><br>
<p><b>Address:</b></p>
<p>${hacks.address}</p>
</div>
</div>
<br>
<div style="400px; height: 200px;" id="${hacks.id}"></div>
</div>
</div>
`
document.querySelector('#maleContainer').innerHTML = html;
});
maleMap();
});
function maleMap() {
maleRef.onSnapshot(snapshot => {
let hacks = [];
snapshot.forEach(doc => {
hacks.push({...doc.data(), id: doc.id})
});
// console.log(hacks);
hacks.forEach(hacks => {
const myLatLng = {lat: +hacks.lat, lng: +hacks.lng};
const map = new google.maps.Map(document.getElementById(hacks.id), {
center: myLatLng,
zoom: 14,
disableDefaultUI: true
});
new google.maps.Marker({
position: myLatLng,
map,
title: "You Live Here!"
})
});
});
}
推荐阅读
- javascript - 如何 .map 嵌套在另一个数组中的数组元素?
- c++ - 如何设置 std::scientific 的格式
- html - 从外部管理页面动态更改 HTML 内容
- javascript - 如果我使一个 dialog() 可拖动,并使可放置将其 innerHTML 更改为可拖动元素的 innerHTML,则 innerHTML 为“CLOSE”。为什么?
- python - 组合多索引数据框中的列
- python - TypeError:只有大小为 1 的数组可以转换为 Python 标量 Numpy
- excel - 在 vba 中使用 Match 函数的 if 语句
- cors - 在 Uno Platform WebAssembly 上下载一个大文件
- sql-server - 在日志中获取太多打开的文件错误
- java - 如何在 toast 中设置重力,我可以更改警报对话框的位置吗?