时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：初始化时未在 onload 定义

javascript - 未捕获的 ReferenceError：初始化时未在 onload 定义

问题描述

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

我能够加载地图，但是在将 makeRequest 代码添加到它之后，当它加载到我的浏览器中时，我一直收到此错误。我目前得到的错误是Uncaught ReferenceError: init is not defined at onload

我相信它指的是 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>

标签： javascriptgoogle-maps-api-3clientgoogle-maps-markers

解决方案

删除逗号并在 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]);
                });
        }
}

推荐阅读