2014-01-12 50 views
0

我有以下腳本將加載從瀏覽器位置到拉斯維加斯:如何添加加載信息,而谷歌地圖填充路線

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps API v3 Directions Example</title> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
<div style="width: 600px;"> 
<div id="map" style="width: 280px; height: 400px; float: left;"></div> 
<div id="panel" style="width: 300px; float: right;"></div> 
</div> 

<script type="text/javascript"> 

var mylat,mylong,request; 
var directionsService = new google.maps.DirectionsService(); 
var directionsDisplay = new google.maps.DirectionsRenderer(); 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom:7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

navigator.geolocation.getCurrentPosition(GetLocation); 
function GetLocation(location) { 

mylat= location.coords.latitude; 
mylong = location.coords.longitude; 
request = { 
origin: mylat+','+mylong, 
destination: '35.580789,-105.210571', 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 

directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById('panel')); 
directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    } 
}); 
} 

</script> 
</body> 
</html> 

這個偉大的工程我需要什麼,但是你可以看到這會在頁面加載時留下一些停頓時間。我想添加一條消息,告訴用戶在方向加載時按住。從我可以告訴我只需要加載時添加一個事件偵聽器。下面是示例我試圖使用方法:

google.maps.event.addListenerOnce(map, 'idle', function(){ 
document.write("<p>please hold while loading</p>"); 
}); 

我試圖把它添加到腳本中的幾個地點,但它在停機期間不加載,而是在頁面加載後。關於如何在代碼中調整此偵聽器以便僅在停機期間顯示的任何建議?

+0

空閒事件。 –

+0

嗯......我明白了。那麼,當地圖確定用戶的位置時,您是否有建議提供一種「加載」消息的好方法? – Presto

+0

http://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded –

回答

0

不知道,但仍然嘗試在地圖變成平移或縮放後閒置

<script type="text/javascript"> 
document.write("<p id='loader'>please hold while loading</p>"); 
    ..... 
    ...... 
    function GetLocation(location) { 
    ............................ 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     document.getElementById('loader').innerHTML = "Map loaded"; 
    } 

    } 

</script> 
+0

謝謝!這會現在工作。 – Presto