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

前端 未结 2 1116
伪装坚强ぢ
伪装坚强ぢ 2021-02-11 02:50

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

\"enter

I am try

相关标签:
2条回答
  • 2021-02-11 03:37

    You can use points and an array to save the points and then you can create a custom marker along the polyline.

    0 讨论(0)
  • 2021-02-11 03:45

    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>

    0 讨论(0)
提交回复
热议问题