嘿伙计们我正在尝试为我的地图添加不同的图层但是我遇到了一些天气图层的问题。当我自己添加交通图层时地图有效但是当我添加天气图层时只有一个灰色框应该出现地图的位置。任何帮助都将非常感谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Get ready to experience Indianapolis! This site will make your visit the best one yet!"/>
<title>The Indy Tour- Travel</title>
<link href="../style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA6VosQrKQOjoTbDSp4Kk4BHvofOJFUfZU&sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var all = [
["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "null", "null", "airport"],
["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "39.71449", "-86.29842", "airport"],
["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101", "airport",],
["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207", "resturant"],
["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216", "hotel"],
["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984", "hotel"]
];
var infoWindow = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
var pos = new google.maps.LatLng(39.76656, -86.15);
map.setCenter(pos);
function infoCallback(infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
}
function setMarkers(map, all) {
for (var i in all) {
var name = all[i][0];
var address = all[i][1];
var city = all[i][2];
var state = all[i][3];
var zip = all[i][4];
var lat = all[i][5];
var lng = all[i][6];
var image = all[i][7];
var latlngset;
latlngset = new google.maps.LatLng(lat, lng);
var icon=null;
if (image=="airport") {
icon=airport;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
else if (image=="hotel") {
icon=hotel;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
else if (image=="resturant") {
icon=resturant;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
var airport = new google.maps.MarkerImage(
'../images/airport.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var hotel = new google.maps.MarkerImage(
'../images/hotel.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var resturant = new google.maps.MarkerImage(
'../images/resturant.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var shadow = new google.maps.MarkerImage(
'../images/shadow.png',
new google.maps.Size(54,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
google.maps.event.addListener(
marker,
'click',
infoCallback(infowindow, marker)
);
}
}
setMarkers(map, all);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="logo">
<div id="wrap">
<div id="header">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="History.html">History</a></li>
<li><a href="Attractions.html">Attractions</a></li>
<li><a href="Landmarks.html">Landmarks</a></li>
<li><a href="#" style="color:#F60; text-decoration:underline;">Travel</a></li>
</ul>
</div>
<div id="content">
<h1 id="title">Travel</h1>
<div id="map_canvas"></div>
<img id="line" alt="footer" src="../images/footer.png"/>
<div id="footer">
<ul id="ftext">
<li><a href="About.html">About the Team and Site</a></li>
<li><p style="display:inline;">Created 2012-2013 for BPA.</p></li>
<li><a href="Credits.html">Credits</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
weatherLayer需要默认情况下未加载的天气库。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?libraries=weather&key=AIzaSyA6VosQrKQOjoTbDSp4Kk4BHvofOJFUfZU&sensor=true"></script>