Question

我在道路上插入了折线。它工作正常。现在，我想在同一个地图中插入另一个分离的折线对齐到道路。它不能正常工作。它系统地将第一条折线的终点连接到第二条折线的起点。

感谢您的帮助。

这是我的代码

function initialize() {

var pos = new google.maps.LatLng(-26.431228,-69.572755);

var myOptions = {
    zoom: 5,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);


//FIRST POLYLINE SNAP TO ROAD

ChileTrip1 = [
    new google.maps.LatLng(-33.417723,-70.605018),
    new google.maps.LatLng(-33.022446,-71.551688)
    ];

var traceChileTrip1 = new google.maps.Polyline({
    path: ChileTrip1,
    strokeColor: "red",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path = snap_path.concat(result.routes[0].overview_path);
            traceChileTrip1.setPath(snap_path);
        }
    });
}

//SECOND POLYLINE SNAP TO ROAD

ChileTrip2 = [
    new google.maps.LatLng(-29.959694,-71.30825),
    new google.maps.LatLng(-32.778038,-71.181908)
];

var traceChileTrip2 = new google.maps.Polyline({
    path: ChileTrip2,
    strokeColor: "blue",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path = snap_path.concat(result.routes[0].overview_path);
            traceChileTrip2.setPath(snap_path);
        }
    });
}

    };
    window.onload = function() { initialize();};

Answer 1

DirectionsService是异步的。在使用回调例程之前清除snap_path数组，或者创建2个单独的snap_path数组：

function initialize() {

var pos = new google.maps.LatLng(-26.431228,-69.572755);

var myOptions = {
    zoom: 5,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);


//FIRST POLYLINE SNAP TO ROAD

ChileTrip1 = [
    new google.maps.LatLng(-33.417723,-70.605018),
    new google.maps.LatLng(-33.022446,-71.551688)
    ];

var traceChileTrip1 = new google.maps.Polyline({
    path: ChileTrip1,
    strokeColor: "red",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path1=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path1 = snap_path1.concat(result.routes[0].overview_path);
            traceChileTrip1.setPath(snap_path1);
        } else alert("Directions request failed: "+status);        
    });
}

//SECOND POLYLINE SNAP TO ROAD

ChileTrip2 = [
    new google.maps.LatLng(-29.959694,-71.30825),
    new google.maps.LatLng(-32.778038,-71.181908)
];

var traceChileTrip2 = new google.maps.Polyline({
    path: ChileTrip2,
    strokeColor: "blue",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path2=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path2 = snap_path2.concat(result.routes[0].overview_path);
            traceChileTrip2.setPath(snap_path2);
        } else alert("Directions request failed: "+status);        
    });
}

    };
    window.onload = function() { initialize();};

working example

请注意，overview_path是“简化的”，不一定遵循道路。如果你需要确切的路线，你需要处理所有的腿。

Google Maps API - 多个对齐道路折线

1 个答案: