编辑:通过移动
<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/