未捕获的无效值错误:initMap 不是一个函数
Uncaught InvalidValueError: initMap is not a function
我正在尝试加载带有一些特定参数的谷歌地图。我知道问题很可能是需要全局声明 initMap 函数。但是,我不知道如何,即使在搜索了许多具有类似问题的StackOverflow帖子之后。
其余的
<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>
谢谢!
我复制了您的代码,但存在一些语法错误。所以我无法测试。但是你的错误是关于initMap
的(当然是:))。删除所有代码并检查 initMap 和 window.initMap。
function initMap() {alert("ok");}
谷歌回调有效吗?
找到了...虽然晚了...
如果您从此链接下载了谷歌地图 js 代码 https://maps.googleapis.com/maps/api/js 然后尝试使用
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
开发工具中存在代码被修改的错误。
在下载的文件中查找initMap
,并将整个文件替换为""
或者用上述链接中的新副本替换,然后锁定文件或将其标记为只读以避免将来出现相同的情况。
在我的情况下,该函数是异步的,并且由于调用了 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>
不是最好的方法,但它解决了我的问题。
手动调用 initMap() 函数作为回退,如果回调函数不起作用。
jQuery(document).ready(function($) {
initMap();
});
希望这有帮助。
任何有类似问题的人,在 initMap 函数之外初始化地图变量对我有用
<script>
var map;
function initMap(){
//your code here
}
</script>
这真的很晚,但无论如何我都要提到它:
<script />
的 src attr 有一个回调函数initMap
,它告诉脚本调用该函数(就像几乎每个回调的工作方式一样)。如果你没有在任何地方定义该函数,它会抛出一个错误(基本上是javascript告诉你它找不到该函数)。
如果你不需要初始化你的map(例如,把它附加到窗口),你可以去掉回调部分,引用它windows.google.maps
但是,我建议@Sanan阿里答案作为初始化地图的一种方式
我已经尝试了很多,然后我意识到我在 initMap 函数之前有一些代码,这些代码是一些异步函数。因此,他们花费了时间,并且在脚本加载之前没有初始化 initMap。
你应该注意的三件事
- 谷歌地图脚本应该在你的代码脚本下面。
- 没有
window.onload
功能。 - 在您的代码之前没有代码来显示地图。
这是我有效的代码。
<script>
function initMap() {
var options = {
zoom: 3,
center: { lat: 51.541837, lng: -0.139199 },
}
var map = new google.maps.Map(document.getElementById("map"), options);
}
</script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap" >
</script>
async="false"
会工作,试试吧!
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 我可以在json对象中添加一个函数吗
- Javascript使函数一个接一个地执行
- 是JavaScript中的函数一个对象
- 两个几乎相等的jQuery函数;一个适用于IE,一个不适用于IE
- 两个Javascript函数一个window.onload=Custom.init;和一个window.onload=f
- 使javascript加载函数一个接一个地执行
- 如何通过两个嵌套的匿名函数(一个带有超时的事件处理程序)传递变量
- 为什么我不能让两个jQuery函数一个在另一个里面呢?
- 给函数一个变量名,而不是它的值
- 如何使用嵌入函数(一个滚动页由Pete - peachananr)
- 是否有可能给JavaScript函数一个类型/类?
- 确保两个函数一个接一个地执行,其中第一个函数内部有一个异步调用
- 两个不同的ajax函数一个接一个调用返回相同的值
- jQuery第一次更改函数一个工作
- 给这个函数一个id
- 如何给回调函数一个值一个变量在特定时刻
- 使用回调使两个函数一个接一个地运行
- 两个函数(一个用php)是否可以用“;onclick”;
- 两个几乎相同的函数.一个函数用Queue进行排队.Jquery效果在queued函数上不起作用.为什么