2012-10-30 167 views
1

我是新來的。 我正試圖製作一個應用程序,使用谷歌地圖API計算兩個地址之間的距離和駕駛時間。谷歌地圖API v3不迴應

我的問題是谷歌DirectionsService()似乎沒有迴應。我無法弄清楚。我一直試圖弄清楚一個星期。

我希望你們能幫忙。 問題似乎在gmapApi.js

這裏是我的代碼。
Default.aspx的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"   Inherits="_Default" %> 

<!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 runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function postbackObj() { 
     var orig = document.getElementById('<%= txbOrigin.ClientID %>').value; 
     var dist = document.getElementById('<%= txbDestination.ClientID %>').value; 
     var temp = showLocation(orig, dist); 
     __doPostBack('gmAPIObj',temp); 
    } 
</script> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">< /script> 
    <script type="text/javascript" src="gmapApi.js"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:TextBox ID="txbOrigin" Text="" runat="server" /> 
<asp:TextBox ID="txbDestination" Text="" runat="server" /> 
<asp:Button ID="btnSubmit" runat="server" Text="Search" OnClientClick="postbackObj()"/>  

<p> 
    < asp:Label runat="server" ID="lblPrint" /> 
</p> 

</div> 
</form> 

</body> 
</html> 

gmapApi.js

function showLocation(orig, dist) { 
var directionService = new google.maps.DirectionsService(); 
var t = ""; 
var request = { 
    origin: orig, 
    destination: dist, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 


directionService.route(request, function (response, status) { 
    if (status != google.maps.DirectionsStatus.OK) { 
     alert(status + " \nreq. failed."); 
    } 
    else { 
     t = request.origin + ';' + request.destination + ';' + response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value; 
    } 
}); 

return t; 
} 

響應變量是零,狀態變量是在directionService.route emptystring(請求,功能(響應,狀態) 我有試圖改變爲無鎖定,並且我試圖將標籤放在身體標籤中,而不鎖定

呈現的html代碼

<!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><title> 

</title> 
<script type="text/javascript"> 
    function postbackObj() { 
     var orig = document.getElementById('txbOrigin').value; 
     var dist = document.getElementById('txbDestination').value; 
     var temp = showLocation(orig, dist); 
     __doPostBack('gmAPIObj',temp); 
    } 
</script> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="gmapApi.js"></script> 

</head> 
<body> 
<form method="post" action="Default.aspx" id="form1"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjMyMzMwNTZkZHxi8IJlhy7bL8nAZqZfL2Vh4Yr8uF80ja6jX9Ypc87B" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
theForm = document.form1; 
} 
function __doPostBack(eventTarget, eventArgument) { 
if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
    theForm.__EVENTTARGET.value = eventTarget; 
    theForm.__EVENTARGUMENT.value = eventArgument; 
    theForm.submit(); 
} 
} 
//]]> 
</script> 


<div class="aspNetHidden"> 

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALsorucDwLTmobsAwK0weWLAwLCi9reA32PxME86E6mQhRTgBkF7cdktbiURIpf/IzKvAs5PHwI" /> 
</div> 
<div> 
<input name="txbOrigin" type="text" value="tilst" id="txbOrigin" /> 
<input name="txbDestination" type="text" value="aarhus" id="txbDestination" /> 
<input type="submit" name="btnSubmit" value="Search" onclick="postbackObj();" id="btnSubmit" />  

<p> 
    <span id="lblPrint"></span> 
</p> 

</div> 
</form> 

</body> 
</html> 

在此先感謝。

回答

2

請求directionService是一個異步過程,函數showLocation內的變量t不會被directionService.route()

呼叫__doPostBack('gmAPIObj',t)的呼叫從directionService.route()而不是全成回調中修改。


function postbackObj() { 
    var orig = document.getElementById('txbOrigin').value; 
    var dist = document.getElementById('txbDestination').value; 
    showLocation(orig, dist); 
} 

//----- 

function showLocation(orig, dist) { 
var directionService = new google.maps.DirectionsService(); 
var t = ""; 
var request = { 
    origin: orig, 
    destination: dist, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 


directionService.route(request, function (response, status) { 
    if (status != google.maps.DirectionsStatus.OK) { 
     alert(status + " \nreq. failed."); 
    } 
    else { 
     t = request.origin + ';' + request.destination + ';' + response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value; 
     __doPostBack('gmAPIObj',t); 
    } 
}); 
} 
+0

喜Dr.Molle。如果(狀態!= google.maps.DirectionsStatus.OK){alert(狀態+「\ nreq。failed。」); },我已將方法更改爲directionService.route(請求,函數(響應,狀態){if其他{ var t = request.origin +';'; t + = request.destination +';'; t + = response.routes [0] .legs [0] .distance.value +';' ; t + = response.routes [0] .legs [0] .duration.value; __doPostBack('gmAPIObj',t); } }); 但問題是一樣的。響應是空的:-( – NanGi

+0

我很確定響應不能爲空,因爲狀態是好的,所以響應必須是有效的directionsResult。我也測試了我的建議,它運行良好。當directionsService' nt發送任何響應,route()的回調將永遠不會執行 –

+0

現在我已經花了一個多星期的時間在這個項目上,我已經嘗試過你的解決方案,但是沒有鎖定,我已經在3臺服務器上試過了,並且使用了IE9和firfox 10.當我在這些瀏覽器上進行調試時,status =「」(空字符串),響應是「NOTHING」,調試器並沒有說它是未定義的,也沒有爲空。 HTML頁面,它就像一個魅力。我不知道還有什麼待辦事項。:-( – NanGi