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> 

Answer 2

请尝试我的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>