请有人告诉我，我不会生气。我整个周末都在一个有效的222线项目上度过。下次我回到它，没有任何改变，它现在无法在本地或在线测试。简而言之，Google地图不会显示。
以为我疯了，我剥离了代码回到基础，直到我有以下几点：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Test Map</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('background9.jpg');
background-color: #B3CDE6;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: cover;
}
h {
color: #000000;
font-family: Verdana, 'Geneva', sans-serif;
font-size: 12px;
display: inline;
text-align: center;
}
#map-canvas {
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
border-right-width: 2px;
border-right-color: #ffffff;
border-right-style: solid;
border-left-width: 2px;
border-left-color: #ffffff;
border-left-style: solid;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(55.144178,-2.254122)
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
};
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我是否已经厌倦了并且遗漏了一些明显的东西，或者Google API已经离线了？以上内容在测试过程中不会产生错误，原始项目也不会产生错误。
以下是我的主项目中仍然拒绝工作的代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Track The T's</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('background9.jpg');
background-color: #B3CDE6;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: cover;
}
h {
color: #000000;
font-family: Verdana, 'Geneva', sans-serif;
font-size: 12px;
display: inline;
text-align: center;
}
#map-canvas {
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
border-right-width: 2px;
border-right-color: #ffffff;
border-right-style: solid;
border-left-width: 2px;
border-left-color: #ffffff;
border-left-style: solid;
}
.pop_up_box_text {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 22px;
color: #ffffff;
display: inline;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="infobox/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
// Set up map
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var store_pins = new Array();
var pin_marker = new Array();
var pin_info = new Array();
var pin_infoop = new Array();
var pin_infotxt = new Array();
// Style Map
var mapStyle = [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#0280ff" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape.natural",
"stylers": [
{ "visibility": "on" },
{ "color": "#fffae9" }
]
},{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels.text" }
];
store_pins = [
['Bellingham Co-Op', 55.144178, -2.254122,'pin','bellinghamcoop.jpg','Staff at Bellingham Co-Op'],
['Leicester Tigers - Kingston Park', 55.018754, -1.672230,'rugby','kingparktigers.jpg','Stu with the Leicester Tigers Rugby Team'],
['North Shields RFC', 55.020768, -1.456395,'rugby','northshieldsrfc.jpg','<a href="http://www.pitchero.com/clubs/northshields/" target="_new">North Shields RFC</a>'],
['Mad March Mare - Hexham Race Course', 54.955180, -2.129021,'pin','mrussellhexham.jpg','Mark Russell at the <a href="http://www.madmarchmare.co.uk" target="_new">Mad March Mare</a>'],
['Richard Shotton - Dubai', 25.022600, 55.368939,'pin','rshottondubai.jpg','Richard Shotton in Dubai'],
['Rob Parker and Micky Hall - Vietnam', 21.029487, 105.848402,'pin','rparkervietnam.jpg','Rob Parker and Micky Hall - Vietnam'],
['Roy Dixon - Dohar', 25.266629, 51.558743,'pin','rdixondohar.jpg','Roy Dixon - Dohar'],
['Roy Dixon - Madrid', 40.491656, -3.591842,'pin','rdixonmadrid.jpg','Roy Dixon - Madrid'],
['Roy Dixon - Portugal', 38.769848, -9.128727,'pin','rdixonportugal.jpg','Roy Dixon - Portugal'],
['Steven Blair - Dorking', 51.235004, -0.333590,'pin','sblairdorking.jpg','Steven Blair - Dorking'],
['Tynedale 1st XV - Corbridge', 54.966981, -2.014240,'rugby','tynedale1stcorbridge.jpg','<a href="http://www.tynedalerfc.co.uk/" target="_new">Tynedale 1st XV - Corbridge</a>'],
['Tynedale RFC - Corbridge', 54.965673, -2.009380,'rugby','tynedalerfccorbridge.jpg','<a href="http://www.tynedalerfc.co.uk/" target="_new">Tynedale 1st XV - Corbridge</a>'],
['The Hawick PSA Team', 55.421825, -2.797123,'rugby','hawickpsa.jpg','The Hawick PSA Team'] // NO COMMA ON LAST ENTRY
]
var myOptions = {
center: new google.maps.LatLng(55.144178, -2.254122),
zoom: 8,
minZoom: 3,
styles: mapStyle
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
// Main Loop
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我对地图的方式没有任何影响，甚至不是一个灰色的方框，当我在过去犯了一些小错误时，我已经看到了地图，就像在选项下忘记放大一样：8。
答案 0 :(得分：0)
初始化地图时，如果没有同时提供位置和缩放，那么您的代码段无法“正常工作”。
提供一个漂亮，简短的测试用例。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Test Map</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('background9.jpg');
background-color: #B3CDE6;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: cover;
}
h {
color: #000000;
font-family: Verdana, 'Geneva', sans-serif;
font-size: 12px;
display: inline;
text-align: center;
}
#map-canvas {
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
border-right-width: 2px;
border-right-color: #ffffff;
border-right-style: solid;
border-left-width: 2px;
border-left-color: #ffffff;
border-left-style: solid;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(55.144178,-2.254122),
zoom:12
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
};
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
答案 1 :(得分：0)
答案： CSS评论用/ * comment * /表示，您不能在CSS中使用HTML评论。
另外，我的第一个答案包含您最初发布的确切代码（我使用了StackOverflow的“Copy Snippet to Answer”按钮。您编辑了原来的问题（我的回答正确），这就是为什么我的原因最初的回答，不再适用。
编辑：当我正在回答并自行修复时，您似乎再次编辑了代码段。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Track The T's</title>
<!--Set up the CSS styles-->
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('background9.jpg');
background-color: #B3CDE6;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: cover;
}
h {
color: #000000;
font-family: Verdana, 'Geneva', sans-serif;
font-size: 12px;
display: inline;
text-align: center;
}
/* Stylise the map canvas */
#map-canvas {
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
border-right-width: 2px;
border-right-color: #ffffff;
border-right-style: solid;
border-left-width: 2px;
border-left-color: #ffffff;
border-left-style: solid;
}
/* Stylise the InfoBox text */
.pop_up_box_text {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 22px;
color: #ffffff;
display: inline;
}
</style>
<!--Connect to the google maps api using your api key-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!--Connect to the infobox javascript library. This is used later to create the pop-up windows -->
<script src="infobox/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
// Set up map
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var store_pins = new Array();
var pin_marker = new Array();
var pin_info = new Array();
var pin_infoop = new Array();
var pin_infotxt = new Array();
// Style Map
var mapStyle = [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#0280ff" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape.natural",
"stylers": [
{ "visibility": "on" },
{ "color": "#fffae9" }
]
},{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels.text" }
];
store_pins = [
['Bellingham Co-Op', 55.144178, -2.254122,'pin','bellinghamcoop.jpg','Staff at Bellingham Co-Op'],
['Leicester Tigers - Kingston Park', 55.018754, -1.672230,'rugby','kingparktigers.jpg','Stu with the Leicester Tigers Rugby Team'],
['North Shields RFC', 55.020768, -1.456395,'rugby','northshieldsrfc.jpg','<a href="http://www.pitchero.com/clubs/northshields/" target="_new">North Shields RFC</a>'],
['Mad March Mare - Hexham Race Course', 54.955180, -2.129021,'pin','mrussellhexham.jpg','Mark Russell at the <a href="http://www.madmarchmare.co.uk" target="_new">Mad March Mare</a>'],
['Richard Shotton - Dubai', 25.022600, 55.368939,'pin','rshottondubai.jpg','Richard Shotton in Dubai'],
['Rob Parker and Micky Hall - Vietnam', 21.029487, 105.848402,'pin','rparkervietnam.jpg','Rob Parker and Micky Hall - Vietnam'],
['Roy Dixon - Dohar', 25.266629, 51.558743,'pin','rdixondohar.jpg','Roy Dixon - Dohar'],
['Roy Dixon - Madrid', 40.491656, -3.591842,'pin','rdixonmadrid.jpg','Roy Dixon - Madrid'],
['Roy Dixon - Portugal', 38.769848, -9.128727,'pin','rdixonportugal.jpg','Roy Dixon - Portugal'],
['Steven Blair - Dorking', 51.235004, -0.333590,'pin','sblairdorking.jpg','Steven Blair - Dorking'],
['Tynedale 1st XV - Corbridge', 54.966981, -2.014240,'rugby','tynedale1stcorbridge.jpg','<a href="http://www.tynedalerfc.co.uk/" target="_new">Tynedale 1st XV - Corbridge</a>'],
['Tynedale RFC - Corbridge', 54.965673, -2.009380,'rugby','tynedalerfccorbridge.jpg','<a href="http://www.tynedalerfc.co.uk/" target="_new">Tynedale 1st XV - Corbridge</a>'],
['The Hawick PSA Team', 55.421825, -2.797123,'rugby','hawickpsa.jpg','The Hawick PSA Team'] // NO COMMA ON LAST ENTRY
]
var myOptions = {
center: new google.maps.LatLng(55.144178, -2.254122),
zoom: 8,
minZoom: 3,
styles: mapStyle
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
// Main Loop
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>