Javascript 未捕获的 InvalidValueError：initMap 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36795150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught InvalidValueError: initMap is not a function
提问by Test327732 Test326632
I am trying to load a google map with some specific parmeters. I understand the problem is most likely that the initMap function needs to be declared globally. However, I have no idea how, even after searching a number of StackOverflow post with similar problems.
我正在尝试使用一些特定参数加载谷歌地图。我理解这个问题很可能是 initMap 函数需要全局声明。但是，即使在搜索了许多具有类似问题的 StackOverflow 帖子之后，我也不知道如何。
The rest
其余的部分
<script>
var databaseArray = [{id: 'BTS1', arfcn: '70', bsic: '29'}
,{id: 'BTS2', arfcn: '60', bsic: '28'}
,{id: 'BTS3', arfcn: '65', bsic: '27'}
,{id: 'BTS4', arfcn: '55', bsic: '26'}
,{id: 'BTS5', arfcn: '75', bsic: '29'}];
var locationArray = [{lat: '60.78064', lng: '10.67037'}
,{lat: '60.76978', lng: '10.66677'}
,{lat: '60.76991', lng: '10.69672'}
,{lat: '60.78889', lng: '10.68462'}
,{lat: '60.76086', lng: '10.65141'}];
function displayDatabase(){
var table1 = document.getElementById('database');
for (var i = 0; i < databaseArray.length; i++){
var bts = databaseArray[i];
var row = document.createElement('tr');
var properties = ['id', 'arfcn', 'bsic'];
for(var j = 0; j < properties.length; j++){
var cell = document.createElement('td');
cell.innerHTML = bts[properties[j]];
row.appendChild(cell);
}
table1.appendChild(row);
}
}
function displayLocations(){
var table2 = document.getElementById('location');
for (var i = 0; i < locationArray.length; i++){
var location = locationArray[i];
var row = document.createElement('tr');
var properties = ['lat', 'lng'];
for(var j = 0; j < properties.length; j++){
var cell = document.createElement('td');
cell.innerHTML = location[properties[j]];
row.appendChild(cell);
}
table2.appendChild(row);
}
}
</script>
<body>
<div id="container">
<div id="map"></div>
<div id="info">
<p>Her skal det s? informasjon om cellen.</p>
</div>
</div>
<script>
displayDatabase();
displayLocations();
</script>
<script>
var map;
var bts = databaseArray[0];
var loc = locationArray[0];
var id1 = bts.id;
var arfcn1 = bts.arfcn;
var bsic1 = bts.bsic;
var latitude = loc.lat;
var longditude = loc.lng;
window.initMap = function() {
var MS = {lat: latitude, lng: longditude};
var radius = 500;
if(TA != 0){
radius = radius * (TA+1);
}
var BTS1 = {lat: 60.78064, lng: 10.67037};
var BTS2 = {lat: 60.76978, lng: 10.66677};
var BTS3 = {lat: 60.76991, lng: 10.69672};
var BTS4 = {lat: 60.78889, lng: 10.68462};
var BTS5 = {lat: 60.76086, lng: 10.65141};
var BTS8 = {lat: 60.79652, lng: 10.66857};
var mapOptions = {
zoom: 13,
center: BTS1
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var image = 'tower1.png';
var spyware = 'spyware.png';
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000'
fillOpacity: 0.35,
map: map,
center: MS,
radius: radius
});
var marker1 = new google.maps.Marker({
position: BTS1,
map: map,
title: 'BTS: 1',
icon: image
});
var marker2 = new google.maps.Marker({
position: BTS2,
map: map,
title: 'BTS: 2',
icon: image
});
var marker3 = new google.maps.Marker({
position: BTS3,
map: map,
title: 'BTS: 3',
icon: image
});
var marker4 = new google.maps.Marker({
position: BTS4,
map: map,
title: 'BTS: 4',
icon: image
});
var marker5 = new google.maps.Marker({
position: BTS5,
map: map,
title: 'BTS: 5',
icon: image
});
var infowindow1 = new google.maps.InfoWindow({
content: "<B>BTS: 1 <br> ARFCN: 70 <br> BSIC: 29</B> " //BCC 5
});
var infowindow2 = new google.maps.InfoWindow({
content: "<B>BTS: 2 <br> ARFCN: 60 <br> BSIC: 28</B> " //BCC 4
});
var infowindow3 = new google.maps.InfoWindow({
content: "<B>BTS: 3 <br> ARFCN: 65 <br> BSIC: 27</B> " //BCC 3
});
var infowindow4 = new google.maps.InfoWindow({
content: "<B>BTS: 4 <br> ARFCN: 55 <br> BSIC: 26</B> " //BCC 2
});
var infowindow5 = new google.maps.InfoWindow({
content: "<B>BTS: 5 <br> ARFCN: 75 <br> BSIC: 29</B> " //BCC 3
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map,marker3);
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map,marker4);
});
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map,marker5);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API-key&callback=initMap"
async defer></script>
</body>
</html>
Thank you!
谢谢！
回答by a.u.b
I copied your code but there are some syntax error. So i can't test. But your error is about initMap(of course :)).
Delete all code and check initMap and your window.initMap.
我复制了你的代码，但有一些语法错误。所以我无法测试。但你的错误是关于initMap（当然:)）。删除所有代码并检查 initMap 和您的 window.initMap。
function initMap() {alert("ok");}
Is google callback works?
谷歌回调有效吗？
回答by jeet.chanchawat
Found it... Though very late to the party...
找到了……虽然聚会很晚了……
If you downloaded the google maps js code from this link https://maps.googleapis.com/maps/api/jsand then tried calling it using
如果您从此链接https://maps.googleapis.com/maps/api/js下载了谷歌地图 js 代码，然后尝试使用
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
There is bug in the development tools that the code gets modified.
开发工具中存在代码被修改的错误。
Find the initMapin the downloaded file and replace whole file with ""Or replace with a fresh copy form the above link and then lock the file or mark it as ReadOnly to avoid the same in future.
initMap在下载的文件中找到并将整个文件替换为""或者替换为上述链接的新副本，然后锁定文件或将其标记为只读以避免将来发生同样的情况。
回答by reylimjr
Not a best way but it fixed my problem.
不是最好的方法，但它解决了我的问题。
Call initMap() function manually as a fallback if ever the callback function wont work.
如果回调函数不起作用，则手动调用 initMap() 函数作为后备。
jQuery(document).ready(function($) {
initMap();
});
Hope this helps.
希望这可以帮助。
回答by Iván Ibarra Pacheco
In my case the function was async and it was crashing since the initmap was being called but it was not loaded at that point yet. So you can just write async="false" as mentioned before:
在我的情况下，该函数是异步的，并且由于调用了 initmap 而它崩溃了，但当时还没有加载它。所以你可以像前面提到的那样写 async="false" ：
<script async="false" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>-39Fxo&libraries=places&callback=initMap"></script>
回答by F KIng
Anyone having a similar issue, initializing the map variable outside the initMap function worked for me
任何有类似问题的人，在 initMap 函数之外初始化 map 变量都对我有用
<script>
var map;
function initMap(){
//your code here
}
</script>
回答by Veena
async="false"
would work, try it!
会工作，试试吧！
