如何在我的 JavaScript HTML 中调用 div 以便在页面上显示的每个 post 上绘制地图？

Question

所以这有点复杂。我正在使用 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>

Answer 1

为了回答这个问题，我会把修复它的方法放在最后。感谢 geocodezip 帮助我解决了这个问题。基本上，正如 geocodezip 所说，地图在添加帖子之前正在初始化，因此地图 div 不存在以解决我删除 API link 上的回调然后包装函数中的地图代码并在快照结束时调用它们


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 HTML 中调用 div 以便在页面上显示的每个 post 上绘制地图？

How can I call the div inside my JavaScript HTML so the map will be drawn on each post displayed on the page?

html

javascript

google-maps-api-3

google-cloud-firestore