將谷歌地圖與ASP.NET網站集成

嗨，是的，我已經與Google文檔作鬥爭了，不，我沒有要求任何人爲我寫一個應用程序FoC！我在MSDN上做了很多SQL論壇，回答自己的問題，並瞭解論壇的工作方式，可能只是提出了非常糟糕的問題。我很感謝你指出了這一點，希望它會導致更多的機會回答這個問題。如上所述，我真的只是希望有人能夠發佈我正在討論的事情的一些工作樣本，然後我可以再糾正一下。我到目前爲止的代碼在下面，但處於一種狀態。將參數傳遞給Javascript是行不通的，我不知道如何開始讓接受用戶與地圖的交互作爲輸入。我的代碼示例基於來自論壇主題，因爲我發現這比官方Google文檔更有幫助！將谷歌地圖與ASP.NET網站集成

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html> 
<html> 
     <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Calculate Distance</title> 
       <script type="text/javascript"  
          src="http://maps.google.com/maps/api/js?sensor=false"></script> 

     </head> 
     <body style="font-family: Arial; font-size: 13px; color: red;"> 
      <form runat="server"> 
       <div id="map" style="width: 400px; height: 300px;"></div> 
       <script type="text/javascript"> 
        var startlocation = document.getElementById('Start').textcontent; 
        var endlocation = document.getElementById('End').textContent; 
        var directionsService = new google.maps.DirectionsService(); 
        var directionsDisplay = new google.maps.DirectionsRenderer(); 
        var myOptions = 
         {  zoom:7,  mapTypeId: google.maps.MapTypeId.ROADMAP }  
        var map = new google.maps.Map(document.getElementById("map"), myOptions); 
        directionsDisplay.setMap(map); 
        var request = 
         {   
          origin: startlocation, 
          destination: endlocation, 
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
         }; 
        directionsService.route(request, function(response, status) { 
         if (status == google.maps.DirectionsStatus.OK) { 
          // Display the distance: 
          document.getElementById('Distance').innerHTML += 
           response.routes[0].legs[0].distance.value/1609.344 + " miles"; 
          directionsDisplay.setDirections(response); 
         } 
        }); 

       </script> 
      <asp:Label ID="Distance" runat="server" Text="Distance: "></asp:Label> 
      <asp:TextBox ID="Start" runat="server" Text="hedge end"></asp:TextBox> 
      <asp:TextBox ID="End" runat="server" Text="fareham"></asp:TextBox> 
       <asp:Button ID="CalcDistance" runat="server" Text="Button" /> 
      </form> 
     </body> 

</html>

我是新來的JavaScript和相當新的ASP.NET和我一直在擺弄這幾天，哪兒也去不了。

我想將Google地圖集成到ASP.NET頁面中，以便用戶可以選擇在地圖上單擊2個點，或者選擇將一個或兩個地址插入文本框。

一旦這兩個位置已經輸入或繪製在地圖上，然後我需要以英里爲單位返回最短的行駛距離到ASP.NET控件。

如果有人可以通過發佈此類或類似的工作示例來幫助我，我會非常感激。

非常感謝您的幫助。

皮特

來源

2012-09-22 Pete Carter

你看的[谷歌地圖API文檔（https://developers.google.com/maps/documentation/javascript /教程）？這應該可以幫助你建立基本的地圖。告訴我們你到目前爲止所嘗試過的以及你在哪裏掙扎，並且你會得到幫助。這裏沒有人會從頭開始構建整個應用程序。 –

+1我不想讓你失望，也不想讓我的評論聽起來很刺耳。原始問題太過泛泛，沒有任何代碼或具體的情況。現在情況好多了，絕對值得回答。 –

Start with this tutorial.

Documentation is here.

How to calculate distance is here.

編輯：

這是與谷歌地圖API v3和ASP.NET距離計算的例子。

客戶端代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Calculate Distance</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script> 
    <style type="text/css"> 
     #map{width:800px;height:500px} 
    </style> 

</head> 

<body style="font-family: Arial; font-size: 13px; color: red;"> 
<form id="Form1" runat="server"> 

    <div id="map"></div> 

    <input runat="server" type="hidden" id="DistanceValue" name="DistanceValue" /> 

    <script type="text/javascript"> 

     var latlng = new google.maps.LatLng(54.40708, 18.667485); 
     var latlng2 = new google.maps.LatLng(54.40708, 18.667485); 

     var myOptions = 
      { 
      zoom:4, 
      center:latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

     var map= new google.maps.Map(document.getElementById('map'),myOptions); 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      title: "Westerplatte - first battle of WW2 in Europe", 
      clickable: true, 
      map: map 
     }); 

     var marker2 = new google.maps.Marker({ 
      position: latlng2, 
      title: "Westerplatte - first battle of WW2 in Europe", 
      clickable: true, 
      map: map 
     }); 

     google.maps.event.addListener(map, "click", function (event) { 
      latlng2 = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); 
      marker2.setMap(null); 
      marker2 = new google.maps.Marker({ 
       position: latlng2, 
       title: "selected by user", 
       clickable: true, 
       map: map 
      }); 

      var hidden = document.getElementById("DistanceValue"); 
      hidden.value = google.maps.geometry.spherical.computeDistanceBetween(latlng, latlng2)/1000; 
     }); 

    </script> 


    <asp:Button ID="Button1" runat="server" Text="Send distance" onclick="Button1_Click" /> 

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 

</form> 
</body> 

</html>

Server代碼：

protected void Button1_Click(object sender, EventArgs e) 
    { 
     if (Request.Form["DistanceValue"] != null) 
     { 
      string myHiddenFiledValue = Request.Form["DistanceValue"].ToString(); 
      Label1.Text = myHiddenFiledValue.Split(',','.')[0] + " [km]"; 
     } 
    }

來源

2012-09-22 23:09:51 rumburak

@ Pete Carter：我更新了我的答案 – rumburak

將谷歌地圖與ASP.NET網站集成

回答

相關問題