Google地图未显示路线

Question

我试图显示两个标记之间的路线,但地图始终只显示爱尔兰的默认位置,并且不显示路线

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

起点和终点通过此函数传递:

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

例如,开始可能是这样的 - Treloggan Ind Est,Newquay,TR7 2SX,Cornwall,United Kingdom.

我没有收到任何错误,所以我不知道为什么它不显示路线

好的,这是什么地图返回:

<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

你的代码对我来说看起来是正确的。我使用您的代码创建了一个片段，并从路由请求中返回了“未找到”状态。如果我将起点更改为 Google 地图可以找到的地址，则会显示路线（在下面的代码片段中）。

如果您知道起点的纬度和经度，则可以使用它，否则您将需要有方向服务知道的地址。

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