使用google maps API在另一条线上画一条线

时间:2015-03-09 13:18:39

标签: javascript google-maps cordova

我想使用javascript Google地图API跟踪道路上的汽车。所以我用这个函数来改变汽车的位置:

function getDrivingRoute(myLatlng, arrival) {
var directionsDisplay = new google.maps.DirectionsRenderer();

map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
startMarker = new google.maps.Marker({
    position : myLatlng,
    map : map,
    icon : '../images/taxii.png'
});
var stopMarker = new google.maps.Marker({
    position : arrival,
    map : map,
    icon : 'icon-1.png'
});

directionsDisplay.setMap(map);
directionsDisplay.setOptions({
    suppressMarkers : true,
    polylineOptions : {
        strokeWeight : 3,
        strokeOpacity : 0.7,
        strokeColor : 'green'
    }
});
request = {
    origin : myLatlng,
    destination : arrival,
    travelMode : google.maps.DirectionsTravelMode.DRIVING
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});
var i = 0;
// var addr1=new google.maps.LatLng('35.8416079','10.5983287');
var addr2 = new google.maps.LatLng('35.8423558', '10.5986720');
var addr3 = new google.maps.LatLng('35.8425124', '10.5992299');
var addr4 = new google.maps.LatLng('35.8423558', '10.5997664');
var addr5 = new google.maps.LatLng('35.8420775', '10.6006032');
var position_driver = [ addr2, addr3, addr4, addr5 ];
var myVar = setInterval(
        function() {
            myLatlng = position_driver[i];

            if (myLatlng.lat() == arrival.lat()
                    && myLatlng.lng() == arrival.lng()) {
                changePosition(myLatlng.lat(), myLatlng.lng());
                window.clearInterval(myVar);


            } else {

            startMarker.setPosition(new google.maps.LatLng(myLatlng.lat(), myLatlng.lng());
            }
            i++;
        }, 8000);

}

汽车标记改变其位置并在地图上获得正确的位置,但路线不会改变,我想消失行进距离或用另一种颜色显示它并用不同颜色显示非行驶距离。那可能吗?我试图用另一个覆盖现有的行,但它没有显示。

1 个答案:

答案 0 :(得分:0)

您可以尝试使用新的折线

覆盖不同颜色的路径
 var reRouteOptions = {
        path: position_driver.getPath(),
        strokeColor: 'grey',
        strokeWeight: 1
    };
    var reRoute = new google.maps.Polyline(reRouteOptions);
    reRoute.setMap(map);