如何在谷歌地图v3中设置多点线，点用粗体圆点连接线条 [英] How in google maps v3 set polyline with points which link lines with bold dots

问题描述

Polyline支持点是否会显示如下：

我试图实现它，但可以弄清楚如何设置点。使用以下代码：

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

我只能做到这一点：

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

解决方案

要在折线的顶点上放置标记，请执行以下操作：

  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：{
 //使用你想要的任何图标作为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的简单来自文档的polyline示例）

工作代码片段：

//这个例子创建了一个2像素宽的红色多段线，显示//威廉金斯福德史密斯在加利福尼亚州奥克兰和澳大利亚布里斯班之间第一次跨太平洋航班的路线。为每个顶点添加蓝色麻疹标记。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}）;对于（var i = 0; i< polyline.getPath（）。getLength（）; i ++）{var marker = new google.maps.Marker（{icon：{//使用你想要的任何图标作为dotsurl ：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; < script src =https：//   

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?

解决方案

To put markers on the vertices of the polyline, do this:

 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 (based off Google's simple polyline example from the documentation)

working code snippet:

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

这篇关于如何在谷歌地图v3中设置多点线，点用粗体圆点连接线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！