Google 웹 사이트와 ASP.NET 웹 사이트 통합

안녕하세요, Google 문서와 맞서 싸웠습니다. 아니, 아무에게도 나를 위해 응용 프로그램을 작성해달라고 요청하지 않았습니다. 나는 MSDN에서 스스로에게 대답하는 SQL 포럼을 많이하고, 포럼이 어떻게 작동하는지 알아보기 위해 질문을 상당히 잘못했을 것이다. 희망을 갖고 질문에 답할 기회가 더 많아 질 것입니다. 언급했듯이, 나는 정말로 누군가가 내가 토론하고있는 것들에 대한 실제 샘플을 게시 할 수 있기를 바랬다. 지금까지 가지고있는 코드는 아래에 있지만 조금은 상태에 있습니다. Javascript에 매개 변수를 전달하는 것이 작동하지 않고지도와 사용자 상호 작용을 입력으로 받아들이는 방법을 알아낼 수 없습니다. 내 코드는 공식적인 Google 문서보다 훨씬 도움이되는 포럼 스레드에서 가져온 샘플입니다. 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>

내가 자바 스크립트에 새로운 ASP.NET 꽤 새로운 오전 나는 일이 바이올린을 켜는 된 어디서나 얻을 수

Google지도를 ASP.NET 페이지에 통합하여 사용자가지도에서 2 점을 클릭하거나 텍스트 상자에 하나 또는 둘 모두의 주소를 삽입하도록 선택할 수 있습니다.

두 위치 중 하나가지도에 입력되거나 플로팅 된 후에는 가장 짧은 주행 거리를 마일 단위로 ASP.NET 컨트롤에 반환해야합니다.

누군가가이 샘플이나 유사한 샘플을 게시하여 나를 도와 줄 수 있다면 정말 좋을 것입니다.

도움을 주셔서 미리 감사드립니다.

피트

출처

2012-09-22 Pete Carter

당신이 [Google지도 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>

서버 코드 :

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

Google 웹 사이트와 ASP.NET 웹 사이트 통합

답변

관련 문제