基于Node.js+Express集成Google Maps API的UFO站点开发问题

要在页面上标记UFO目击事件的位置，你需要将服务器端获取的经纬度坐标传递到前端的Google Maps初始化脚本中，同时修复一处DOM元素ID的匹配错误。以下是具体修改步骤：

1. 修正地图元素ID匹配问题 #

在你的tracker.ejs中，地图容器的ID是googleMap，但初始化脚本中使用了document.getElementById('map')，这会导致地图无法正常渲染。需要将脚本中的ID改为googleMap。

2. 注入经纬度坐标到前端脚本 #

通过EJS的<%=%>语法，将randomCase中的经纬度值注入到初始化函数中，并转换为数值类型（因为Google Maps API需要数字格式的坐标）。

修改后的tracker.ejs脚本部分 #

<script async defer src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap"> </script>
<script>
  function initMap() {
    // 从后端获取目击事件的坐标
    var location = {
      lat: parseFloat(<%= randomCase.latitude %>),
      lng: parseFloat(<%= randomCase.longitude %>)
    };
    // 初始化地图，以目击位置为中心
    var map = new google.maps.Map(
      document.getElementById('googleMap'), { // 修正ID匹配
        zoom: 8, // 调整缩放级别以更好展示细节
        center: location
      });
    // 在地图上标记目击位置
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
</script>

3. 后端代码确认 #

你的index.js已经正确将randomCase传递给EJS模板，其中包含了经纬度信息，无需额外修改。如果API返回的坐标是字符串格式，parseFloat会自动将其转换为数字，确保Google Maps可以正常使用。

可选优化 #

如果担心坐标可能为空或无效，可以在前端添加简单的校验：

function initMap() {
  var lat = parseFloat(<%= randomCase.latitude %>);
  var lng = parseFloat(<%= randomCase.longitude %>);
  
  // 校验坐标有效性
  if (isNaN(lat) || isNaN(lng)) {
    console.error("无效的坐标信息");
    return;
  }
  
  var location = { lat: lat, lng: lng };
  // 后续地图初始化代码...
}

内容的提问来源于stack exchange，提问作者Ivan Alier-Reyes