我正在尝试在加载谷歌地图时显示(加载....)消息。我对地图和Java Script的经验很少,所以请原谅我的代码。在我尝试添加代码片段以显示加载消息之前,地图正常工作。现在地图根本不起作用,但我确定这只是将代码置于错误位置的问题。 (缺乏技能)有人可以告诉我这里我做错了什么。
<script type="text/javascript" src="./js/NauticalChartsAPI.js"></script>
<script type="text/javascript" src="./js/gmapsv3ext.js"></script>
<script language="JavaScript" type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var maploaded = false
var maploadTimer = 0
function load(){
//fire the 'loading' message
checkGoogleMap()
// Global scope
var G = google.maps;
var map;
var api = new NauticalChartsAPI();
/**
* Initialize the Google map.
*/
}
function init() {
/**
* boiler-plate Google Maps code.
*/
var latlng = new G.LatLng(29.37895317, -91.75290604);
var myOptions = {
zoom: 9,
center: new G.LatLng(29.37895317, -91.75290604),
mapTypeId: G.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: G.MapTypeControlStyle.DROPDOWN_MENU
},
};
var map = new G.Map(document.getElementById("map_canvas"),myOptions);
map.addListener('click', (function () {
var converter = function (value, labels) {
var sign = value < 0 ? 0 : 1;
var abs = Math.abs(Math.round(value * 1000000));
var dec = abs % 1000000 / 1000000;
var deg = Math.floor(abs / 1000000);
var min = Math.floor(dec * 60);
var sec = (dec - min / 60) * 3600;
var result = '';
result += deg;
result += "\u00B0";
result += ' ';
result += (min < 10 ? '0' : '') + min;
result += "\u0027";
result += ' ';
result += sec.toFixed(1) * 10;
result += "\u0022";
result += labels[sign];
return result;
};
var marker;
var popup;
return function (e) {
var latLng = e.latLng;
if (!marker) {
marker = new google.maps.Marker({
map: map
});
popup = new google.maps.InfoWindow();
marker.addListener('click', function () {
if (popup && !popup.getMap()) {
popup.open(map, marker);
}
})
} else {
popup.close();
}
var content = converter(latLng.lat(), ['S', 'N']) + '<br>' + converter(latLng.lng(), ['W', 'E']);
marker.setTitle(content);
marker.setPosition(latLng);
popup.setContent('<p>' + content.replace(/ /g, ' ') + '</p>');
popup.open(map, marker);
};
})());
api.setMap(map);
if( api.isLoaded() ) {
// Select the panel we want.
var panel = api.getPanelByFileName('1116A_1');
// Compute and set center/zoom for optimal map coverage
var bounds = panel.getBounds();
map.setCenter(bounds.getCenter());
// add panel as a tile layer
var panelMapType = panel.getTileLayer();
//alert(overlay.setOpacity(.2));
//overlay.setOpacity(1);//this doesn't work!
map.overlayMapTypes.insertAt(0,panelMapType);
}
//add the 'loaded' listener
GEvent.addListener(map, 'tilesloaded', function(){
maploaded = true
});
//add the 'map type changed' listener
GEvent.addListener(map, 'maptypechanged', function(){
resetCheckGoogleMap()
});
//add the 'zoom level changed' listener
//GEvent.addListener(map, 'zoomend', function(){
//resetCheckGoogleMap()
//});
}
function checkGoogleMap() {
//increment the timer every second
maploadTimer = maploadTimer + 1
//specify the target element for our messages
var msg = document.getElementById('msg')
if (maploaded == false) {
//if we dont have a fully loaded map - show the message
$("#msgContainer").slideDown("fast")
//for the first 5 tries, show this message
if (maploadTimer < 5) {
msg.innerHTML = 'Loading map images from Google Maps...';
}
//loop it
setTimeout('checkGoogleMap()',1000);
} else {
//otherwise, show 'loaded' message then hide the message after a second
msg.innerHTML = 'Map loaded.'
maploadTimer = 0;
setTimeout('hideMsg()',1000);
}
//if the timer get up to 20, show a different message
if (maploadTimer >= 20 && maploadTimer <40 ) {
msg.innerHTML = 'Sorry about the wait - your connection to Google Maps is a little slow.';
}
//if it gets to 40 show another different message with a reload link (for what its worth!)
if (maploadTimer >= 40) {
msg.innerHTML = 'Hmmm, still waiting! You can wait a bit longer or you could try <a href="javascript:load()">reloading the map</a>.';
}
}
function hideMsg() {
$("#msgContainer").slideUp("fast")
}
function resetCheckGoogleMap() {
maploaded = false
maploadTimer = 0;
checkGoogleMap();
}
}
else
alert('api is not loaded!');
}
</script>
<style>
.map_canvas {
position:absolute;
top:50px;
width:100%;
height:90%;
}
}
#msgContainer {
width:100%;
height:30px;
line-height:30px;
background:#FFFFCC;
position:absolute;
z-index:100;
left:0;
top:0;
display:none;
font-size:1.2em;
border-bottom:#FFCC66 1px solid;
}
#msg {
padding-left:10px;
text-align:center;
}
</style>
</head>
<body onLoad="init()">
<div id="msgContainer">
<div id="msg"></div>
</div>
<div id="map_canvas" style="width:100%; height:90%;"></div>
</body>
</html>
答案 0 :(得分:3)
GEvent是Google Maps Javascript API v2语法,如果你使用的v3是等效的google.maps.event
//add the 'loaded' listener
GEvent.addListener(map, 'tilesloaded', function(){
maploaded = true
});
//add the 'map type changed' listener
GEvent.addListener(map, 'maptypechanged', function(){
resetCheckGoogleMap()
});
应该是:
//add the 'loaded' listener
google.maps.event.addListener(map, 'tilesloaded', function(){
maploaded = true
});
//add the 'map type changed' listener
google.maps.event.addListener(map, 'maptypechanged', function(){
resetCheckGoogleMap()
});