Question

我试图通过添加折线在主要面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的{{1}}设置polylineOptions，例如：

DirectionsRenderer

演示：

＆＃13;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

documentation

example from the documentation

代码段

// This example adds a predefined symbol (an arrow) to a polyline.
// Setting offset to 100% places the arrow at the end of the line.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 20.291,
      lng: 153.027
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // [START region_polyline]
  // Define a symbol using a predefined path (an arrow)
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  // Create the polyline and add the symbol via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{
      lat: 22.291,
      lng: 153.027
    }, {
      lat: 18.291,
      lng: 153.027
    }],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });
  // [END region_polyline]
}
google.maps.event.addDomListener(window, 'load', initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

在gmap折线上添加箭头方向

2 个答案: