从数据库加载的位置的谷歌地图标记未显示

Google Map markers not showing for locations loaded from database

本文关键字：图标 显示 地图 谷歌 数据库 加载 位置      更新时间：2023-09-26

我正在尝试使用带有Node.js和mongodb的网站使用Google Maps API。我在 Node 上有一个快速应用程序.js它从 mongodb 获取位置。我已经在我的网站上设置了地图。但是，它仅显示 Node.js 代码中硬编码的位置的标记。这是来自路由的代码段.js

app.get('/website', function(req, res){
    website.website(function(events){
        res.render('website/index_page.ejs', {events : events});
    });
});

index_page.ejs

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <% include map_head %> 
</head> 
<body>
    <h2>Events</h2>
    <ol>
        <%events.forEach(function(event){%>
            <li><p><%= event %></p></li>
        <%});%>
    </ol>
    <div id="googleMap" style="width:650px;height:700px;"></div>`
</body> 
</html>`

而map_head.ejs

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapProp = {
            center:new google.maps.LatLng(10, 90),
            zoom:4,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        events.forEach(function (event) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(Number(event.latitude), Number(event.longitude)),
                map: map,
                title: "test"
            });
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

事件对象仅对服务器及其 ejs 解析器所知。

客户端不会在您提供的代码中接收事件对象。它只接收一个"ol"列表。

您可以使用如下代码将 events 对象包含在 map_head.ejs 中：

var events=<%- JSON.stringify(events); %>;
相关文章：