Google Maps ben iki işaret arasındaki bir rotayı göstermeye çalışıyorum rotayı

Question

görünmüyor, ancak harita her zaman sadece İrlanda varsayılan konumu gösteriyor ve rotada

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

başlangıç ​​ve bitiş noktaları gösterilmiyor Bu fonksiyonun geçirilir olsun:

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

böylece örneğin başlangıç ​​gibi bir şey olabilir - Treloggan San Est'ten Newquay, TR7 2SX, Cornwall, Birleşik Krallık. Buranın

Tamam rotayı göstermez neden bilmiyorum bu yüzden

ne Harita geri hataları oluyor alamıyorum:

<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

Kodunuz bana doğru bakıyor. Kodunuzla bir snippet oluşturdum ve rota isteğinden "NOT FOUND" durumunu geri aldım. Başlangıç ​​noktasını Google Haritalar'ın bulabileceği bir adrese değiştirirsem rota görüntülenir (aşağıdaki pasajda).

Başlangıç ​​noktasının enlem ve boylamını biliyorsanız, bunu kullanabilirsiniz, aksi takdirde yön hizmetinin bildiği bir adrese sahip olmanız gerekir.

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

benim aspx kodunu deneyin:

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