Question

我试图在地图上的点之间绘制路径。我有一个2点的数组（对于我的测试）。我可以轻松地在地图上绘制它们，但看起来方向服务没有按预期工作。

这是我应该根据谷歌地图得到的： enter image description here

但这就是我得到的： enter image description here

这是我的测试代码：

var map = undefined;

function initialize() 
{
    var mapOptions = {
        center: new google.maps.LatLng(-33.885026, 151.268316),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 14
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

jQuery(document).ready(function($)
{
    initialize();
    loadPaths(map);
});

function loadPaths(gmap)
{
    var latlngbounds = new google.maps.LatLngBounds(),
        infoWindow = new google.maps.InfoWindow(),
        pathPoints = [], 
        index=0,
        positions = [
        {latitude: "-33.88914",longitude: "151.25673"},
        {latitude: "-33.888",longitude: "151.2623"},
    ];

    // The fix
    positions.reverse();

    $.each(positions, function(k, v) {
        var myLatlng = new google.maps.LatLng(v.latitude, v.longitude);
        pathPoints.push(myLatlng);
        index++;
    });

    // Intialize the Path Array
    var path = new google.maps.MVCArray();

    // Intialise the Direction Service
    var service = new google.maps.DirectionsService();

    var iconSymbol = {
        path: 'M 40 20 L 80 20 L 100 40 L 100 140 L 20 140 L 20 40 Z',
        anchor: new google.maps.Point(60, 10),
        scale: 0.15,
        strokeColor: '#000000',
        strokeWeight: 1,
        fillColor: 'steelblue',
        fillOpacity: 0.8,
    };

    // Set the Path Stroke Color
    var poly = new google.maps.Polyline({
        map: gmap,
        strokeColor: '#dd0000',
        icons: [{
            icon: iconSymbol
        }]
    });

    // Draw the path for this vehicle
    // We compute the path between each point to follow the road
    for (var i = 0; i < pathPoints.length; i++) {
        // If it's not the last point
        if ((i + 1) < pathPoints.length) {
            var src = pathPoints[i];
            var des = pathPoints[i + 1];

            // We had the starting point to the poly path
            path.push(src);

            // We compute the path between the 2 points
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.IMPERIAL
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    // We add the new computed points
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }

    // Set the path of the polyline to draw it
    poly.setPath(path);
}

更新

由于@anto，我已经解决了这条路的问题但我仍然有时间问题，路上没有画上路。我认为这是服务回调函数的asynchronous问题，但我不确定如何解决它。如果我在jsfiddle中重新启动脚本，它会随机工作，但有时我最终会得到这种绘图：

enter image description here

更新2

看起来使用递归函数修复了大部分函数，除了我的最后一点没有绘制：http://jsfiddle.net/maxwell2022/wY32u/11/

Answer 1

点击谷歌地图第一次创建起点作为第二次在地图上点击它会在地图中创建终点并在地图上显示路线

>       var map;
    >         var infowindow = new google.maps.InfoWindow();
    >         var wayA;
    >         var wayB;
    >         var geocoder = new google.maps.Geocoder();
    >         var directionsDisplay = new google.maps.DirectionsRenderer({
    >             suppressMarkers: true,
    >             panel: document.getElementById('right-panel'),
    >             draggable: true
    >         });
    >         var directionsService = new google.maps.DirectionsService();
    >         var data = {};
    >         initMap();
    >         function initMap() {
    >             debugger;
    >             map = new google.maps.Map(document.getElementById('rmap'), {
    >                 center: new google.maps.LatLng(23.030357, 72.517845),
    >                 zoom: 15
    >             });
    >             google.maps.event.addListener(map, "click", function (event) {
    >                 if (!wayA) {
    >                     wayA = new google.maps.Marker({
    >                         position: event.latLng,
    >                         map: map,
    >                         icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
    >                     });
    >                 } else {
    >                     if (!wayB) {
    >                         debugger;
    >                         wayB = new google.maps.Marker({
    >                             position: event.latLng,
    >                             map: map,
    >                             icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
    >                         });
    >                         calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB);
    >                     }
    >                 }
    >             });
    >         }
    >      function computeTotalDistance(result) {
    >             var total = 0;
    >             var myroute = result.routes[0];
    >             for (var i = 0; i < myroute.legs.length; i++) {
    >                 total += myroute.legs[i].distance.value;
    >             }
    >             total = total / 1000;
    >             return total;
    >         }
    >         function computeTotalDuration(result) {
    >             var total = 0;
    >             var myroute = result.routes[0].legs[0].duration.text;
    >             return myroute;
    >         }
    >         function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) {
    >             debugger;
    >             directionsDisplay.setMap(map);
    >             google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
    >                 debugger;
    >                 calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB);
    >             });
    >             directionsService.route({
    >                 origin: wayA.getPosition(),
    >                 destination: wayB.getPosition(),
    >                 optimizeWaypoints: true,
    >                 travelMode: 'DRIVING'
    >             }, function (response, status) {
    >                 if (status === 'OK') {
    >                     debugger;
    >     
    >                     var route = response.routes[0];
    >                     wayA.setMap(null);
    >                     wayB.setMap(null);
    >                     pinA = new google.maps.Marker({
    >                         position: route.legs[0].start_location,
    >                         map: map,
    >                         icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
    >                     }),
    >                     pinB = new google.maps.Marker({
    >                         position: route.legs[0].end_location,
    >                         map: map,
    >                         icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
    >                     });
    >                     google.maps.event.addListener(pinA, 'click', function () {
    >                         infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location);
    >                         infowindow.open(map, this);
    >                     });
    >                     google.maps.event.addListener(pinB, 'click', function () {
    >                         debugger;
    >                         infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " +
    > computeTotalDistance(directionsDisplay.getDirections()) + " Km
    > <br/><b>Travel time=</b> " +
    > computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " +
    > route.legs[0].end_location);
    >                         infowindow.open(map, this);
    >                     });
    >                 } else {
    >                     window.alert('Directions request failed due to ' + status);
    >                 }
    >                 directionsDisplay.setDirections(response);
    >             });
    >         }

使用Google Map Direction Service计算2点之间的路径

1 个答案: