在 gmap 折线上添加箭头方向

Question

我试图通过添加多段线在 primefaces gmap上的两个标记之间绘制一条路线。我通过创建一个叠加层来制作折线，然后在托管 bean 中以这种方式添加折线：

       Polyline poly= new Polyline();
       LatLng coord = new LatLng(track.getLatitude(), track.getLongitude()); 
       coords.add(coord);   
       poly.setStrokeWeight(strokeWeight); 
       poly.setStrokeColor(strokeColor);
       poly.setStrokeOpacity(strokeOpacity); 
       myoverlay.addOverlay(poly);

在 JSF 页面上，我以这种方式创建了 gmap

<p:gmap center="#{dashboardModel.midPoint.lat}, #{dashboardModel.midPoint.lng}" zoom="10" type="MAP"
                                style="width:auto;height:700px" model="#{dashboardModel.myoverlay}" >

如何添加显示折线方向的箭头？

Answer 1

设置一个IconSequence通过polylineOptions的DirectionsRenderer，如：

  var directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions:{
      icons:[
              { icon: 
                {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale:3,
                  fillOpacity:1
                },
                repeat:'50px'
              }
            ]
    }
  });

演示：

  var directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions:{
      icons:[
              { icon: 
                {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  scale:3,
                  fillOpacity:1
                },
                repeat:'50px'
              }
            ]
    }
  });

function init() {
  var map               = new google.maps.Map(document.getElementById('map'), {
                            zoom: 7,
                            center: {lat: 0, lng: 0}
                          }),
      directionsService = new google.maps.DirectionsService,
      directionsDisplay = new google.maps.DirectionsRenderer({
                            map:map,
                            polylineOptions:{
                                icons:[
                                  { icon: 
                                    {
                                      path: google.maps.SymbolPath
                                              .FORWARD_CLOSED_ARROW,
                                      scale:  3,
                                      fillOpacity:  1
                                    },
                                    repeat:'50px'
                                  }
                                ]
                            }});
  

      directionsService.route({
        origin      : 'Berlin',
        destination : 'Paris',
        travelMode  : google.maps.TravelMode.DRIVING
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            } 
            else {
              window.alert('Directions request failed due to ' + status);
            }
  });

}
google.maps.event.addDomListener(window,'load',init);

      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }