如何让Google Maps V3多段线从指定点开始上线?

时间:2013-04-10 12:32:42

标签: javascript google-maps google-maps-api-3

我尝试从指定的标记点使折线与道路对齐。我的问题是,同样的 代码有时会产生良好的结果,例如此图像enter image description here

有时结果不好,如下: enter image description here

为什么这是hapenning的任何想法?而且,折线对公路有限制吗?

我的地图ini代码:

var myLatlng = new google.maps.LatLng(47.6557, 23.5833);
var mapOptions = {
    zoom: 14,
    minZoom: 13,
    maxZoom: 19,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI:   true,
    overviewMapControl: false,
    streetViewControl:  false,
    scaleControl:       false,
    mapTypeControl:     false,
    panControl:         true,
    panControlOptions:{
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_RIGHT
    }
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

我的折线路线快照代码:

var polys = new google.maps.Polyline({
                map: map,
                strokeColor: "#5555FF"
            });
    myCoord = [
                        new google.maps.LatLng(47.663383463156144, 23.58100461977301),
                        new google.maps.LatLng(47.659221287827435, 23.586240291770082),
                        new google.maps.LatLng(47.65534785438211, 23.576713085349184),
                        new google.maps.LatLng(47.66020405359421, 23.572249889548402)
            ]; 

    // BEGIN: Snap to road
    var service = new google.maps.DirectionsService(),polys,snap_path=[];               
    polys.setMap(map);
    placeMarker(myCoord[0], map);
    for(j=0;j<myCoord.length-1;j++){            
            service.route({origin: myCoord[j],destination: myCoord[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);
                      polys.setPath(snap_path);
                }        
            });
    }

1 个答案:

答案 0 :(得分:11)

如果您只想要使用航点的路线,那么您应该使用这些航路点调用directionsService一次,就像这样(未经测试):

var service = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();    
directionsDisplay.setMap(map);

var waypts = [];
for(j=1;j<myCoord.length-1;j++){            
      waypts.push({location: myCoord[j],
                   stopover: true});
}

var request = {
    origin: myCoord[0],
    destination: myCoord[myCoord.length-1],
    waypoints: waypts,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

service.route(request,function(result, status) {                
    if(status == google.maps.DirectionsStatus.OK) {                 
          directionsDisplay.setDirections(result);
    } else { alert("Directions request failed:" +status); }
});

注意:免费API最多有8个航路点。