未捕获的 ReferenceError：初始化时未在 onload 定义答案

【问题标题】：Uncaught ReferenceError: init is not defined at onload未捕获的 ReferenceError：初始化时未在 onload 定义
【发布时间】：2020-08-07 23:03:03
【问题描述】：

这里有一个类似的问题，但它并没有让我解决我的问题。我正在使用 google maps javascript api 创建一个网页。我已经制作了自己的 Restfull 服务器，并带有一条路由，客户端将使用该路由从我的 mysql 数据库中获取地图坐标/数据。

我可以加载地图，但是在将 makeRequest 代码添加到我的浏览器后，我一直收到此错误。我目前得到的错误是 Uncaught ReferenceError: init is not defined 在加载时

我相信它指的是 body onload="init();"在我的 HTML 中。

这是我的代码，任何帮助将不胜感激，因为我的 JS 知识有些有限。提前谢谢你

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Team Locations</title>
    <style type="text/css">
        body {
            font: normal 14px Verdana;
        }

        h1 {
            font-size: 24px;
        }

        h2 {
            font-size: 18px;
        }

        #sidebar {
            float: right;
            width: 30%;
        }

        #main {
            padding-right: 15px;
        }

        .infoWindow {
            width: 220px;
        }

    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMFE1XBzVnhPOI5IH90FrwumFfLo5x40&callback=initMap"></script>
    <script type="text/javascript">
        //<![CDATA[

        var map;

        // Centre of York
        var center = new google.maps.LatLng(53.957741, -1.082260);

        var geocoder = new google.maps.Geocoder();
        var infowindow = new google.maps.InfoWindow();

        function init() {

            var mapOptions = {
                zoom: 13,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


            makeRequest('http://localhost:5032/', function(data) {

                    var data = JSON.parse(data.responseText);

                    for (var i = 0; i < data.length; i++) {
                        displayLocation(data[i]);
                    });
            },

                function makeRequest(url, callback) {
                    var request;
                    if (window.XMLHttpRequest) {
                        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
                    } else {
                        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
                    }
                    request.onreadystatechange = function() {
                        if (request.readyState == 4 && request.status == 200) {
                            callback(request);
                        }
                    }
                    request.open("GET", url, true);
                    request.send();
                }
            });




            //]]>

    </script>
</head>

<body onload="init();">

    <h1>Team Locations</h1>

    <section id="sidebar">
        <div id="directions_panel"></div>
    </section>

    <section id="main">
        <div id="map_canvas" style="width: 70%; height: 500px;"></div>
    </section>

</body>

</html>

【问题讨论】：

查看我的主要评论，但控制台中也有此警告，这是提示。 Uncaught SyntaxError: Unexpected token ')'

标签： javascript google-maps-api-3 client google-maps-markers

【解决方案1】：

您在渲染而不是加载时调用init()。

尝试传递函数的引用。

<body onload="init">

【讨论】：

【解决方案2】：

简单的语法问题。您的 init 函数以逗号 , 结尾，并且您在代码末尾有一个额外的 });，因此看起来您从对象模式中复制了一些代码但错过了开头 ({ 或者您需要删除结束 }) 和 init() 函数后的逗号。

【讨论】：

谢谢，我去看看

【解决方案3】：

删除逗号并在 init() 中再添加一个大括号，如下所示：

建议：使用以下代码复制并替换您的 init()。

    function init() {

        var mapOptions = {
            zoom: 13,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


        makeRequest('http://localhost:5032/', function(data) {

                var data = JSON.parse(data.responseText);

                for (var i = 0; i < data.length; i++) {
                    displayLocation(data[i]);
                });
        }
}

【讨论】：