尝试使用通过EJS传递给客户端的数据绘制多个Google Map标记/信息窗口时，initMap（）不是一个函数

Posted 2021-05-06

我试图用谷歌地图绘制出多个地图标记和信息窗口。当我添加多个标记时，我无法让地图渲染，但我可以使用中心位置进行渲染。我正在使用EJS将数据从后端的API请求传递到客户端。

首先，我可以在中心位置加载地图，前提是用户lat / lng是从后端的邮政编码生成的。以下是客户端(search.ejs)文件中的代码：

<script>
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: <%= userLat %>, lng: <%= userLng %> },
            zoom: 10
        });
    }
</script>

在post请求完成并呈现search.ejs文件之后，这段代码将呈现一个带有这些坐标中心点的Google Map。坐标通过EJS从后端传入。所以我知道我可以成功地使用通过EJS传递的数据来处理谷歌地图。

---

现在，我希望能够根据后端返回的API位置数据呈现标记和信息窗口。我可以将后端API请求中的位置坐标传递给客户端，没有任何问题。我知道我已成功通过终端中的console.log()将API位置数据传递给客户端，并实际使用此EJS标记<%= %>将数据呈现到html页面。

以下是我在qazxsw poi模板中编写的代码，用于渲染带有标记和信息窗口的Google Map：

search.ejs

这是我的 <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: <%= userLat %>, lng: <%= userLng %> }, zoom: 10 }); } var infoWindow = new google.maps.InfoWindow(); var marker, i; var venueLocations = <%= venues.venues %>; for (i = 0; i < venueLocations.length; i++) { marker = new google.maps.Marker({ position: new google.mapsLatLng(venueLocations[i].location.lat, venueLocations[i].location.lng), map: map, animation: google.maps.Animation.DROP }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(venueLocations[i].location); infowindow.open(map, marker); } })(marker, i)); } </script> 文件，因此您可以看到我在加载Google Maps API脚本的位置：

footer.ejs

最后，当地图尝试使用标记渲染时，这是我在控制台中出现的错误：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/public/js/frontend.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_tYpqkFMkUc1mq2pzsBGySr6IeQkFhBA&callback=initMap" async defer>
</script>

Uncaught SyntaxError: Unexpected identifier (index):36 Uncaught Lb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Lb (https://maps.googleapis.com/m…MkUc1mq2pzsBGySr6IeQkFhBA&callback=initMap:150:59"} 抛弃了我，因为我只能认为它指的是Unexpected identifier (index):36，但第36行没有任何与此有关的东西，所以我认为我错了这意味着什么。

答案

您的问题可能是因为您在此处输入错误导致错误：

index.ejs

这应该是：

position: new google.mapsLatLng(venueLocations[i].location.lat, venueLocations[i].location.lng),