Google Maps non mostrando percorso

Question

Sto cercando di mostrare un percorso tra i due marcatori, ma la mappa è sempre solo mostra la località predefinita di Irlanda e non mostra il percorso

public string DrawMapDirections(string Start,string End,string[] WayPoints) 
{ 
    string map = "<script type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"></script>" + 
    "<script>" + 
     "var rendererOptions = { "+ 
      "draggable: true "+ 
     "}; " + 
     "var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); " + 
     " var directionsService = new google.maps.DirectionsService(); " + 
     " var map; " + 

     "function initialize() { " + 
      "var ireland = new google.maps.LatLng(53.085222, -7.558594); " + //Default Ireland 
      " var mapOptions = { " + 
      " zoom: 7, " + 
      " mapTypeId: google.maps.MapTypeId.ROADMAP," + 
      " center: ireland " + 
      "}; " + 
      "map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); " + 
      "directionsDisplay.setMap(map); " + 
      "directionsDisplay.setPanel(document.getElementById('directionsPanel'));" + 

      "google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { " + 
       "computeTotalDistance(directionsDisplay.directions); "+ 
      "}); "+ 
      //Call calcRoute 
      " calcRoute();" + 
     "}" + 

     "function calcRoute() { " + 
      "var start = '" + Start.Replace("'", "") + "'; " + 
      "var end = '" + End.Replace("'", "") + "'; " + 
      "var waypts = []; "; 

    foreach (string s in WayPoints) 
    { 
     map += "waypts.push({ " + 
       "location:'" + s.Replace("'","") + "'}); "; 
    } 
      map += "var request = { " + 
       "origin: start, " + 
       "destination: end, " + 
       "waypoints: waypts, " + 
       "optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, " + 
       "durationInTraffic:document.getElementById('chkDurationInTraffic').checked , " + 
       "provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked," + 
       "avoidHighways: document.getElementById('chkAvoidHighWays').checked," + 
       "avoidTolls: document.getElementById('chkAvoidTolls').checked, " + 
       "travelMode: google.maps.DirectionsTravelMode.DRIVING " + 
      "}; " + 
      "directionsService.route(request, function(response, status) { " + 
       "if (status == google.maps.DirectionsStatus.OK) {" + 
        "directionsDisplay.setDirections(response);" + 
        "var route = response.routes[0];" + 
       "}" + 
      "});" + 
     " }" + 

     "function computeTotalDistance(result) { "+ 
      "var total = 0; "+ 
      "var myroute = result.routes[0]; " + 
      "for (i = 0; i < myroute.legs.length; i++) { "+ 
       "total += myroute.legs[i].distance.value; "+ 
      "} "+ 
      "total = total/1000; "+ 
      "document.getElementById('total').innerHTML = total + ' km'; "+ 
     "} "+ 

     "</script>"; 
    return map; 
} 

Il punto iniziale e finale avere superato attraverso questa funzione:

GoogleMap gm = new GoogleMap(); 
html += gm.DrawMapDirections(start, end, waypoints.ToArray()); 

così per esempio l'inizio potrebbe essere qualcosa di simile - Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, REGNO UNITO.

Non ricevo errori in modo da non so il motivo per cui non visualizza il percorso

Ok ecco la cosa mappa rendimenti:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var rendererOptions = { draggable: true }; 
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
var directionsService = new google.maps.DirectionsService(); 
var map; function initialize() { 
    var ireland = new google.maps.LatLng(53.085222, -7.558594); 
    var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: ireland }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
    google.maps.event.addListener(directionsDisplay, 'directions_changed', 

     function() { 
      computeTotalDistance(directionsDisplay.directions); 
     }); 
     calcRoute() 
    ;} 
    function calcRoute() { 
    var start = 'Unit 2, Hendy Industrial Estate, Hendy, SWANSEA, SA4 0XP, West Glamorgan, UNITED KINGDOM'; 
    var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; 
    var waypts = []; 
    var request = { 
    origin: start, destination: end, 
    waypoints: waypts, optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, 
    durationInTraffic:document.getElementById('chkDurationInTraffic').checked , 
    provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked, 
    avoidHighways: document.getElementById('chkAvoidHighWays').checked,avoidTolls: document.getElementById('chkAvoidTolls').checked, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK){ 
      directionsDisplay.setDirections(response);var route = response.routes[0];}}); 
     } 
     function computeTotalDistance(result) { 
      var total = 0; 
      var myroute = result.routes[0]; 
      for (i = 0; i < myroute.legs.length; i++) { 
       total += myroute.legs[i].distance.value; } 
       total = total/1000; 
       document.getElementById('total').innerHTML = total + ' km'; 
     } 
    </script> 

Answer 1

il codice sia corretto per me. Ho creato uno snippet con il tuo codice e ho recuperato uno stato "NOT FOUND" dalla richiesta del percorso. Il percorso viene visualizzato (nello snippet in basso) se cambio il punto di partenza in un indirizzo che Google Maps può trovare.

Se si conosce la latitudine e la longitudine del punto di partenza, è possibile utilizzarlo, altrimenti sarà necessario disporre di un indirizzo di cui il servizio di orientamento è a conoscenza.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Direction Service Example</title> 
 
</head> 
 

 
<body> 
 
    <div id="map_canvas" style="width: 600px;height: 600px"></div> 
 
    <script> 
 
    var map; 
 
    var directionsDisplay; 
 
    var directionsService; 
 

 
    function initialize() { 
 
     var ireland = new google.maps.LatLng(53.085222, -7.558594); 
 
     var mapOptions = { 
 
     zoom: 7, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: ireland 
 
     }; 
 
     directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     draggable: true 
 
     }); 
 
     directionsService = new google.maps.DirectionsService(); 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
     directionsDisplay.setMap(map); 
 
     directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', 
 

 
     function() { 
 
      computeTotalDistance(directionsDisplay.directions); 
 
     }); 
 
     calcRoute(); 
 
    } 
 

 
    function calcRoute() { 
 
     var start = 'Hendy Industrial Estate, Hendy, Pontarddulais, Swansea, Carmarthenshire SA4 0XP, UK'; 
 
     var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM'; 
 
     var waypts = []; 
 
     var request = { 
 
     origin: start, 
 
     destination: end, 
 
     waypoints: waypts, 
 
     optimizeWaypoints: false, 
 
     durationInTraffic: true, 
 
     provideRouteAlternatives: true, 
 
     avoidHighways: false, 
 
     avoidTolls: false, 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }; 
 
     directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
      directionsDisplay.setDirections(response); 
 
      var route = response.routes[0]; 
 
     } 
 
     }); 
 
    } 
 

 
    function computeTotalDistance(result) { 
 
     var total = 0; 
 
     var myroute = result.routes[0]; 
 
     for (i = 0; i < myroute.legs.length; i++) { 
 
     total += myroute.legs[i].distance.value; 
 
     } 
 
     total = total/1000; 
 
     document.getElementById('total').innerHTML = total + ' km'; 
 
    } 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
 
</body> 
 

 
</html>

Answer 2

Si prega di provare il mio codice 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>Search Route Direction</title> 

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"> 
    </script> 

    <%--Getting User Current Location--%> 

    <script type="text/javascript"> 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(success); 
     } else { 
      alert("There is Some Problem on your current browser to get Geo Location!"); 
     } 

     function success(position) { 
      var lat = position.coords.latitude; 
      var long = position.coords.longitude; 
      var city = position.coords.locality; 
      var LatLng = new google.maps.LatLng(lat, long); 
      var mapOptions = { 
       center: LatLng, 
       zoom: 12, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: LatLng, 
       title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " 
          + lat + +"<br />Longitude: " + long 
      }); 

      marker.setMap(map); 
      var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" + 
            lat + "<br /> Longitude:" + long + "" 
      }); 
      getInfoWindow.open(map, marker); 
     } 
    </script> 

    <%--Getting Route Direction From User Current Location to Destination--%> 

    <script type="text/javascript"> 
     function SearchRoute() { 
      document.getElementById("MyMapLOC").style.display = 'none'; 

      var markers = new Array(); 
      var myLatLng; 

      //Find the current location of the user. 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(p) { 
        var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
        var m = {}; 
        m.title = "Your Current Location"; 
        m.lat = p.coords.latitude; 
        m.lng = p.coords.longitude; 
        markers.push(m); 

        //Find Destination address location. 
        var address = document.getElementById("txtDestination").value; 
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': address }, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          m = {}; 
          m.title = address; 
          m.lat = results[0].geometry.location.lat(); 
          m.lng = results[0].geometry.location.lng(); 
          markers.push(m); 
          var mapOptions = { 
           center: myLatLng, 
           zoom: 4, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 
          var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions); 
          var infoWindow = new google.maps.InfoWindow(); 
          var lat_lng = new Array(); 
          var latlngbounds = new google.maps.LatLngBounds(); 

          for (i = 0; i < markers.length; i++) { 
           var data = markers[i]; 
           var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
           lat_lng.push(myLatlng); 
           var marker = new google.maps.Marker({ 
            position: myLatlng, 
            map: map, 
            title: data.title 
           }); 
           latlngbounds.extend(marker.position); 
           (function(marker, data) { 
            google.maps.event.addListener(marker, "click", function(e) { 
             infoWindow.setContent(data.title); 
             infoWindow.open(map, marker); 
            }); 
           })(marker, data); 
          } 
          map.setCenter(latlngbounds.getCenter()); 
          map.fitBounds(latlngbounds); 

          //***********ROUTING****************// 

          //Initialize the Path Array. 
          var path = new google.maps.MVCArray(); 

          //Getting the Direction Service. 
          var service = new google.maps.DirectionsService(); 

          //Set the Path Stroke Color. 
          var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); 

          //Loop and Draw Path Route between the Points on MAP. 
          for (var i = 0; i < lat_lng.length; i++) { 
           if ((i + 1) < lat_lng.length) { 
            var src = lat_lng[i]; 
            var des = lat_lng[i + 1]; 
            path.push(src); 
            poly.setPath(path); 
            service.route({ 
             origin: src, 
             destination: des, 
             travelMode: google.maps.DirectionsTravelMode.DRIVING 
            }, function(result, status) { 
             if (status == google.maps.DirectionsStatus.OK) { 
              for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
               path.push(result.routes[0].overview_path[i]); 
              } 
             } else { 
              alert("Invalid location."); 
              window.location.href = window.location.href; 
             } 
            }); 
           } 
          } 
         } else { 
          alert("Request failed.") 
         } 
        }); 

       }); 
      } 
      else { 
       alert('Some Problem in getting Geo Location.'); 
       return; 
      } 
     } 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <table style="border: solid 15px blue; width: 100%; vertical-align: central;"> 
     <tr> 
      <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; 
       text-align: center; font-family: Verdana; font-size: 20pt; color: Green;"> 
       Draw Route Between User's Current Location & Destination On Google Map 
      </td> 
     </tr> 
     <tr> 
      <td style="background-color: skyblue; text-align: center; font-family: Verdana; font-size: 14pt; 
       color: red;"> 
       <b>Enter Destination:</b> 
       <input type="text" id="txtDestination" value="" style="width: 200px" /> 
       <input type="button" value="Search Route" onclick="SearchRoute()" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div id="MyMapLOC" style="width: 550px; height: 470px"> 
       </div> 
       <div id="MapRoute" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
     </tr> 
    </form> 
</body> 
</html>