如何在谷歌地图v3设置折线与点连接粗线点的线

Question

折线是否支持点，以便它们显示如下：

我正在尝试实现它，但可以弄清楚如何设置点。使用此代码：

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

我只能这样做：

您会看到线条之间没有显示点。是否可以显示点？

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

working example（基于Google的simple polyline example from the documentation）

工作代码段：

// 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>

Answer 2

您可以使用点和数组来保存点，然后您可以沿折线创建自定义标记。