HTML文件结构配置及Google Maps API加载失败问题排查

项目按模块拆分至Load Bar、Map、Range Slider三个文件夹，其中Load Bar和Range Slider功能正常，但Google地图始终无法加载。以下是现有代码问题分析及修复方案：

现有代码问题梳理 #

1. index.html 问题 #

• 缺少地图容器<div id="map"></div>，map.js中尝试获取该元素但DOM中不存在
• 谷歌地图API未正确引入，当前错误地将API链接写在map.js中
• 重复引入jQuery（3.3.1和3.4.1版本），易引发冲突
• 进度条、滑块等DOM元素被写在</body>标签外，不符合HTML规范

2. map.js 问题 #

• 第一行的src="https://maps.googleapis.com/..."属于无效JS代码，这是script标签的属性内容，不应出现在JS文件中
• map变量未声明，违反JS语法规范
• gestureHandling配置被错误嵌套在options对象中，应直接作为Map配置项

修复后的代码示例 #

修复后的 index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- 引入谷歌地图API，替换YOUR_API_KEY为你的有效密钥 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&language=he"></script>
    <link href="Map/map.css" rel="stylesheet">
    <link href="Load Bar/loadbar.css" rel="stylesheet">
    <style type="text/css">
        body {
            overflow: hidden;
            background-color:#0d0f07;
        }
    </style>
</head>
<body>
    <!-- 新增地图容器 -->
    <div id="map"></div>

    <div class='progress' id="progress_div">
        <div class="center-screen">
            <h1 id="loading-message">...טוען מפה</h1>
            <div class='bar' id='bar1'></div>
            <div class='percent' id='percent1'></div>
        </div>
    </div>

    <input type="hidden" id="progress_width" value="0">
    <div class="range-slider">
        <input class="input-range" type="range" value="50" min="1" max="100">
        <span class="range-value"></span>
    </div>

    <!-- 移除重复的jQuery，保留一个版本即可 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="Map/map.js" type="text/javascript"></script>
    <script src="Load Bar/loadbar.js" type="text/javascript"></script>
    <script src="Range Slider/rangeslider.js" type="text/javascript"></script>
</body>
</html>

修复后的 map.js #

function initMap() {
    // 地图中心点坐标
    const uluru = { lat: 32.1582615544072, lng: 34.89155037133181 };
    // 声明map变量
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 11,
        center: uluru,
        disableDefaultUI: true,
        fullscreenControl: true,
        // 修正gestureHandling配置位置
        gestureHandling: 'greedy'
    });

    const rectangle = new google.maps.Rectangle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map,
        bounds: {
            north: uluru.lat - 0.005,
            south: uluru.lat + 0.005,
            west: uluru.lng - 0.005,
            east: uluru.lng + 0.005,
        },
    });
} 
window.initMap = initMap;

关键修复步骤说明 #

1. 添加地图容器：在<body>内新增<div id="map"></div>，确保map.js能找到渲染地图的DOM节点
2. 正确引入谷歌API：在<head>中添加谷歌地图API的script标签，替换YOUR_API_KEY为你在Google Cloud平台申请的有效API密钥
3. 规范HTML结构：所有DOM元素必须放在<body>标签内部，避免浏览器解析异常
4. 修复map.js语法错误：移除无效的API链接代码，声明变量，修正配置项层级
5. 清理重复资源：移除重复引入的jQuery，避免版本冲突

内容的提问来源于stack exchange，提问作者Daniel Lip