How in google maps v3 set polyline with points which link lines with bold dots

Question

Does polyline support points so they will be displayed like this:

I am trying to implement it but can figure out how to set points. With this code:

polyline = new google.maps.Polyline({
    path: coordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 4
});

map.setCenter(new google.maps.LatLng(response[centerIndex].Lat, response[centerIndex].Long));
polyline.setMap(map);

I can do just only this:

You will see that the dots are not shown between lines. Is it possible to display the dots?

Answer 1

要将标记放在折线的顶点上,请执行以下操作:

 polyline = new google.maps.Polyline( {
    path          : coordinates,
    strokeColor   : "#FF0000",
    strokeOpacity : 1.0,
    strokeWeight  : 4
 } );

 for ( var i = 0; i < polyline.getPath().getLength(); i++ ) {
    var marker = new google.maps.Marker( {
       icon     : {
           // use whatever icon you want for the "dots"
           url     : "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
           size    : new google.maps.Size( 7, 7 ),
           anchor  : new google.maps.Point( 4, 4 )
       },
       title    : polyline.getPath().getAt( i ),
       position : polyline.getPath().getAt( i ),
       map      : map
    } );
}

map.setCenter( new google.maps.LatLng( 
   response[ centerIndex ].Lat,
   response[ centerIndex ].Long ) );
polyline.setMap( map );

工作示例(基于Google 文档中的简单折线示例)

工作代码片段:

// This example creates a 2-pixel-wide red polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia.  Adds blue "measle" markers to each vertex.

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var polyline = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    var marker = new google.maps.Marker({
      icon: {
        // use whatever icon you want for the "dots"
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(4, 4)
      },
      position: polyline.getPath().getAt(i),
      title: polyline.getPath().getAt(i).toUrlValue(6),
      map: map
    });
  }

  polyline.setMap(map);

}

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

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

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