Question

编辑：通过移动来修复它 <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文件并调用脚本时我收到错误＆＃34; Uncaught TypeError：window.initMap不是函数＆＃34;。

如果有任何提示，您可以提供我/修复此错误，我们将非常感激！

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>

其他HTML文件

    {%  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();
    });

再次感谢！ PS。对于结构不良的代码感到抱歉，仍在进行中。

还使用django框架和ajax with jquery

Answer 1

由于我的面包和黄油服务器端是php，我在某处丢失了，但是如果这曾经起作用，那么你可能搞砸了脚本应该加载的顺序（一个函数被称为尚未加载）

尝试按照之前调用的顺序调用js的每个部分

你的＆lt;！ - 不确定这是什么 - ＆gt;评论，那是一个javascript（jQuery）库，您可能需要在页面上的所有其他脚本之前加载。

P / S我很抱歉没有那么多的帮助，但我没有时间立即设置django来测试。

未捕获的TypeError：window.initMap不是函数

1 个答案: