javascript – Google地图未显示路线

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

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

解决方法

你的代码对我来说是正确的.我用你的代码创建了一个片段,然后我从路径请求中找回了“未找到”的状态.如果我将起点更改为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,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,function() {
          computeTotalDistance(directionsDisplay.directions);
        });
      calcRoute();
    }

    function calcRoute() {
      var start = 'Hendy Industrial Estate,Pontarddulais,Swansea,Carmarthenshire SA4 0XP,UK';
      var end = 'Treloggan Ind Est,UNITED KINGDOM';
      var waypts = [];
      var request = {
        origin: start,optimizeWaypoints: false,durationInTraffic: true,provideRouteAlternatives: true,avoidHighways: false,avoidTolls: false,travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request,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>

javascript – Google地图未显示路线

解决方法

猜你在找的JavaScript相关文章