![](/img/trans.png)
[英]PHP Post to a div on main html page - So it can be parsed by Javascript
[英]How can I call the div inside my JavaScript HTML so the map will be drawn on each post displayed on the page?
所以這有點復雜。 我正在使用 Firebase Firestore 完成大學作業。 基本上我有一個頁面顯示在單獨的頁面上填寫的信息,我的數據庫中的每個條目都有一個緯度和經度值,我希望在顯示的每個條目上都有一個 map,所以在我正在編寫的 JavaScript 文件夾中HTML 我希望如何顯示信息我有 map div(我將使用 doc.id 作為唯一標識符,但目前我只是想讓 Z1D78DC8ED51214E518B5110AE2449 工作)。
我收到此錯誤
"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,他幫助我解決了這個問題。 Basically as geocodezip said the map was initialising before the posts were being added so the map div didn't exist in order to solve that I removed the callback on my API link and then wrapped the map code in a function and called them at the end快照的
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!"
})
});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.