Intégration de Google Maps avec le site Web ASP.NET

Salut, oui j'ai lutté contre la Documentation Google, et non, je ne demande à personne d'écrire une application pour moi FOC! Je fais pas mal de forum SQL en me répondant sur MSDN, et comment fonctionnent les forums, j'ai probablement très mal posé la question. Je vous remercie de l'avoir signalé, car j'espère que cela donnera plus de chances à la réponse à la question. Comme je l'ai mentionné, j'espérais vraiment que quelqu'un puisse poster des exemples de travail avec lesquels je discutais, que je pourrais ensuite bricoler. Le code que j'ai jusqu'ici est ci-dessous, mais est dans un peu d'un état. Passer les paramètres au Javascript ne fonctionne pas et je n'arrive pas à comprendre comment commencer à accepter les interactions de l'utilisateur avec la carte en entrée. L'exemple sur lequel mon code est basé provient d'un fil de discussion du forum car je l'ai trouvé beaucoup plus utile que la documentation officielle de Google!Intégration de Google Maps avec le site Web 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>

Je suis nouveau à javascript et assez nouveau pour ASP.NET et je suis tripotent pendant des jours et ne peut pas aller partout. Je souhaite intégrer Google Maps dans une page ASP.NET, afin que l'utilisateur puisse choisir de cliquer sur 2 points sur la carte, ou plutôt d'insérer une ou les deux adresses dans des zones de texte. Une fois que les deux emplacements ont été entrés ou tracés sur la carte, je dois alors renvoyer la distance de conduite la plus courte en miles à un contrôle ASP.NET.

Si quelqu'un pouvait m'aider en publiant un échantillon de travail de ceci ou quelque chose de similaire, je serais vraiment reconnaissant.

Un grand merci à l'avance pour votre aide.

Pete

Source

2012-09-22 Pete Carter

Avez-vous regardé la [documentation de l'API Google Maps] (https://developers.google.com/maps/documentation/javascript /Didacticiel)? Cela devrait vous aider à construire la carte de base. Montrez-nous ce que vous avez essayé jusqu'à présent et où vous vous battez, et vous obtiendrez de l'aide. Personne ici ne vous construira toute l'application à partir de zéro. –

+1 Je ne voulais pas vous frustrer, et je ne voulais pas avoir l'air dur dans mon commentaire. La question initiale était trop générique, sans code ni scénario concret. C'est beaucoup mieux maintenant et définitivement mérite une réponse. –

Start with this tutorial.

Documentation is here.

How to calculate distance is here.

EDIT:

Ceci est par exemple de calcul de la distance avec l'API Google Maps v3 et ASP.NET.

Code client:

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

Code Serveur:

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]"; 
     } 
    }

Source

2012-09-22 23:09:51 rumburak

@ Pete Carter: J'ai mis à jour ma réponse – rumburak

Intégration de Google Maps avec le site Web ASP.NET

Répondre

Questions connexes