javascript - 未捕获的 TypeError : window. initMap 不是函数-6ren

javascript - 未捕获的 TypeError : window. initMap 不是函数

转载作者：可可西里更新时间：2023-11-01 14:43:33

26

4

编辑:通过移动 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjEILUPsJO83wPyTKZlscBCMO-Aajy6Kw&signed_in=true&libraries=geometry, places&callback=initMap"></script>在js脚本调用之后。然后通过尝试修复我之前的代码来修复我添加的错误。感谢您的帮助!

我一直在努力重新组织我的代码，以便项目更加健壮(与所有 javascript 嵌入 html 文件的方式相比)，但是当将它移动到一个新的 javascript 文件并调用我收到的脚本时错误“未捕获的类型错误:window.initMap 不是函数”。

如果有任何提示可以提供给我/修复此错误，将不胜感激!

HTML 代码:

    <!DOCTYPE html>
{% load staticfiles %}

<html>
    <head>
        <title>{% block title %} RacksOnRacks{% endblock %}</title>
        <link rel="stylesheet" href="{% static "css/racks.css" %}"  />
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- not sure what this is-->
        {% block script_block %}{%  endblock %}
    </head>

    <body>
        <div id="menu">
            <div id="logo"  onclick="location.href='/';" style="cursor:pointer;">
                <img id="logoimg" src="{% static "images/temprackicon.png" %}"/>
{#                TODO make this match onclick initmap#}
            </div>
            <div id="title" onclick="location.href='/';" style="cursor:pointer;">
                RACKS ON RACKS
            </div>
        </div>
        {% block body_block %}{% endblock %}
    </body>
</html>

Other HTML File

    {%  extends 'racks/baselayer.html' %}
    {%  load staticfiles %}
    {% block title %} Racks On Racks: Find Nearby Places to Secure Your Bike! {% endblock %}


{% block script_block %}
    <link rel="stylesheet" href="{% static "map/css/maps-admin.css" %}" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjEILUPsJO83wPyTKZlscBCMO-Aajy6Kw&signed_in=true&libraries=geometry, places&callback=initMap"></script>
    <script type="text/javascript" src="{% static "map/javascript/googlemaps.js" %}"></script>

{%  endblock %}

{% block body_block %}
    <select id="filters">
        <option value="100">100m</option>
        <option value="250">250m</option>
        <option value="500">500m</option>
        <option value="1000">1000m</option>
    </select>


    <div id="map_canvas"></div>
{% endblock %}

和 JS:

    function initMap(){
    var myLatLngGlobal;
    var map;
    var filterDistance;

    var self = {
        // starts all the processes
        //function placeRackMarkers(locations, map) {
        initialize: function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    myLatLngGlobal = myLatLng;
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

            var zoom = 12;
            //var filterDistance = 1000;

            //var latlng = new google.maps.LatLng(lat, lng);
            //myLatLngGlobal = latlng;
            var options = {
                zoom: zoom,
                center: myLatLngGlobal,
                //mapTypeId:
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), options);
            var marker = new google.maps.Marker({
                position: myLatLngGlobal,
                map: map,
                title: 'Hello World!',
                draggable: false,
                animation: google.maps.Animation.DROP

            });
            self.attachHandlers();
            self.displayRacks();
            //add all the intialiazing functions (self.(....)
        },

        //Event handlers attached
        attachHandlers: function () {
            $("#filterDistance").click(function () {
                filterDistance = "#filterDistance";
            });
            //console.log("filterDistance = " + self.filterDistance);
        },

        /*
         var filterDistance1 = document.getElementById("filters").value; //put outside of self var if this doesnt work
         console.log("filterDistance =" + filterDistance1);

         filterDistance = filterDistance1;
         */



        displayRacks: function () {
            var locations;
            $.get('/racks/map_locations/', {}, function (data) {
                locations = data['racks'];

                filterPlaceRacks(locations, myLatLngGlobal, map);
            });
        }
    };


    function placeRackMarkers(locations, map) {

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
        }
    }

    function filterPlaceRacks(racks, map) {
        var filteredRacks = [];
        for (var i = 0; i < racks.length; i++) {
            if (checkDistance(racks[i]) <= self.filterDistance) {

                filteredRacks.push(racks[i]);
                console.log(filteredRacks);
            }
        }
        placeRackMarkers(filteredRacks, map);
    }


    function checkDistance(rack) {
        var rackLatLng = new google.maps.LatLng(rack[1], rack[2]);
        return (google.maps.geometry.spherical.computeDistanceBetween(rackLatLng, myLatLngGlobal));
    }

    return self;
}

    $(document).ready(function () {
        var googleMap = initMap();
        googleMap.initialize();
    });

再次感谢!附言。抱歉结构不佳的代码，仍在进行中。

同样使用django框架，以及jquery的ajax

最佳答案

因为我的面包和黄油服务器端是 php，所以我在某个地方迷路了，但如果这曾经有效，那么你可能搞砸了脚本应该加载的顺序(一个函数被调用尚未加载)

尽量按照之前调用的顺序调用js的各个部分

您的  评论，这是一个 javascript (jQuery) 库，您可能需要在页面上的所有其他脚本之前加载它。

P/S 很抱歉没有提供太多帮助，但我现在没有时间设置 django 来测试。

关于javascript - 未捕获的 TypeError : window. initMap 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33625427/

26

4

0

文章推荐： html - :after class doesn't work as expected

文章推荐： ide - Hadoop开发环境，你的是什么样的？

文章推荐： windows - 在命令提示符中从命令行打开文件资源管理器

文章推荐： mysql - 最长匹配前缀

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

javascript - 未捕获的 TypeError : window. initMap 不是函数