Javascript Google map API v3-不呈现infowindows的多个标记
一般来说，我不熟悉编码和API，通过使用另一个教程，我成功地获得了一个带有多个标记和信息窗口的地图 当从本地源预览地图时，地图会完美呈现，但当上载到托管站点时，地图会显示空白 有人能对可能出现的错误给出任何见解吗？我在下面包含了我的代码Javascript Google map API v3-不呈现infowindows的多个标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,一般来说，我不熟悉编码和API，通过使用另一个教程，我成功地获得了一个带有多个标记和信息窗口的地图 当从本地源预览地图时，地图会完美呈现，但当上载到托管站点时，地图会显示空白 有人能对可能出现的错误给出任何见解吗？我在下面包含了我的代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> &l
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
我认为，问题在于代码引用了initMap
回调函数，而该函数显然不存在于代码中。回调的目的是在下载了所有必要的库之后运行，因此下面修改的代码应该会有所帮助。我还调整了AutoCenter
函数，因为它生成了一个关于$
未定义的错误-通常这是一个jQuery方法，但在上面的页面示例中没有jQuery代码/库
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
function initMap(){
var AutoCenter=function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(mkr){
bounds.extend(mkr.position);
});
map.fitBounds(bounds);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
content:locations[i][0],
map: map
});
markers.push( marker );
google.maps.event.addListener( marker, 'click', function(event) {
infowindow.setContent( this.content );
infowindow.open( map, this );
}.bind( marker ) );
}
AutoCenter();
}
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyD3weurNK33fOlKCfokaTQWz6NKN7z8nT4&callback=initMap"></script>
</body>
</html>
我认为，问题在于代码引用了initMap
回调函数，而该函数显然不存在于代码中。回调的目的是在下载了所有必要的库之后运行，因此下面修改的代码应该会有所帮助。我还调整了AutoCenter
函数，因为它生成了一个关于$
未定义的错误-通常这是一个jQuery方法，但在上面的页面示例中没有jQuery代码/库
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
function initMap(){
var AutoCenter=function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(mkr){
bounds.extend(mkr.position);
});
map.fitBounds(bounds);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
content:locations[i][0],
map: map
});
markers.push( marker );
google.maps.event.addListener( marker, 'click', function(event) {
infowindow.setContent( this.content );
infowindow.open( map, this );
}.bind( marker ) );
}
AutoCenter();
}
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyD3weurNK33fOlKCfokaTQWz6NKN7z8nT4&callback=initMap"></script>
</body>
</html>
我在您的页面（本地）中发现两个javascript错误：
未捕获引用错误：未定义google
“initMap不是函数”
第一个原因是您在脚本加载（异步加载脚本）中使用了async defer
和callback=initMap
第二个原因是您没有initMap
函数
如果同步加载脚本（删除async defer
和callback参数），这就解决了这两个问题（尽管您可能想调查为什么Google建议异步加载脚本，而不是在所有示例中都这样做）
要实现这一改变：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
（因为您没有包含JQuery，所以要修复在文档头部包含
的问题）
更新代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
我在您的页面（本地）中发现两个javascript错误：
未捕获引用错误：未定义google
“initMap不是函数”
第一个原因是您在脚本加载（异步加载脚本）中使用了async defer
和callback=initMap
第二个原因是您没有initMap
函数
如果同步加载脚本（删除async defer
和callback参数），这就解决了这两个问题（尽管您可能想调查为什么Google建议异步加载脚本，而不是在所有示例中都这样做）
要实现这一改变：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
（因为您没有包含JQuery，所以要修复在文档头部包含
的问题）
更新代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>