Google地图路线方向路径颜色更改,导航器从一个航点移动到另一个航点

时间:2015-08-17 09:53:37

标签: javascript angularjs google-maps ionic

我有像

这样的要求
Source,
waypoint 1,
waypoint 2,
waypoint 3,
Destination

我需要Sourcewaypoint 1的路径是一种颜色,waypoint 1waypoint 2是另一种颜色。

这里我得到的整个路径以单(红色)颜色显示。但是当我们移动到下一个航点时我需要改变不同的颜色

  mapSite.getDirection = function(latitudeValue, longitudeValue, waypts) {

        document.getElementById('directionsPanel').innerHTML = "";
        directionsDisplay = new google.maps.DirectionsRenderer({
        polylineOptions: {
        strokeColor: "red"
        }
    });
        var site = new google.maps.LatLng(latitudeValue, longitudeValue);

        var mapOptions = {
            center: site,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        mapSite.map = map;

            directionsDisplay.setMap(mapSite.map);
            var start = mapSite.latitude + "," + mapSite.longitude;                             
            var end = latitudeValue + "," + longitudeValue;

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {

                directionsDisplay.setDirections(response);
                   var route = response.routes[0];
                   directionsDisplay.setPanel(document.getElementById('directionsPanel'));

                } 
           });
   };

1 个答案:

答案 0 :(得分:0)

我认为最简单的方法是多次调用方向api。例如,Source-> waypoint 1,waypoint 1-> waypoint 2,waypoint 2-> waypoint 3,waypoint 3-> Destination ...

否则,您从回调函数response获得directionsService.route(request, function(response, status) {,其中包含带有legs的{​​{1}}和折线。您可以自己绘制路线,而不是调用steps

有关回复格式的详细信息,请参阅official documentation