Google Maps nicht Route zeigt

Question

Ich versuche, eine Route zwischen zwei Markern zu zeigen, aber die Karte wird immer nur die Standardposition von Irland zeigt, und wird die Route

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

Die Start- und Endpunkte nicht angezeigt erhalten durch diese Funktion übergeben:

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

so zum Beispiel der Start könnte so etwas wie - Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, Vereinigtes Königreich.

Ich erhalte keine Fehler, damit ich weiß nicht, warum es nicht um die Strecke Ok

nicht angezeigt ist hier das, was Karte zurückkehrt:

<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

Ihr Code mir richtig aussieht. Ich habe ein Snippet mit deinem Code erstellt und ich habe einen "NOT FOUND" Status von der Routenanfrage erhalten. Die Route wird angezeigt (im folgenden Abschnitt), wenn ich den Startpunkt zu einer Adresse ändere, die Google Maps finden kann.

Wenn Sie den Längen- und Breitengrad des Startpunkts kennen, können Sie diesen verwenden, andernfalls benötigen Sie eine Adresse, von der der Richtungsdienst Kenntnis hat.

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

Bitte versuchen Sie meinen aspx-Code:

<%@ 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>