google map polyline dashed and double lines

问题

I have a google map polyline sample here with four coordinates. I drawn the dashed line using symbol property as,

 var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        strokeWeight: 2,
        scale: 3
    };

    var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027),
    new google.maps.LatLng(15.291, 153.027),
    new google.maps.LatLng(11.291, 153.027)];

    var line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeOpacity: 0,
        icons: [{
            icon: lineSymbol,
            offset: '50%',
            repeat: '15px'
        }],
        strokeColor: '#FF0000',
        map: map
    });

But how can I draw the dashed line only between second and third coordinates and a double line between third and fourth?

回答1:

You can't style separate segments of a single polyline. You need to make separate polylines, then apply the style you want to each separate polyline:

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027),
new google.maps.LatLng(15.291, 153.027),
new google.maps.LatLng(11.291, 153.027)];

for (var i = 0; i < lineCoordinates.length - 1; i++) {
    var line = new google.maps.Polyline({
        path: [lineCoordinates[i], lineCoordinates[i + 1]],
        strokeOpacity: 0,
        icons: icons[i],
        strokeColor: color[i],
        map: map
    });
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(18.291, 153.027),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    strokeWeight: 2,
    scale: 3
  };
  var doubleLine = {
    path: 'M 0.5,-1 0.5,1 M -0.5,-1 -0.5,1',
    strokeOpacity: 1,
    strokeWeight: 1,
    scale: 3
  };
  var color = ["#FF0000", "#FF00FF", "#0000FF"];
  var icons = [
    [{
      icon: lineSymbol,
      offset: '0%',
      repeat: '6px'
    }],    [{
      icon: lineSymbol,
      offset: '50%',
      repeat: '15px'
    }],
    [{
      icon: doubleLine,
      offset: '0%',
      repeat: '6px'
    }]
  ];

  var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027),
    new google.maps.LatLng(15.291, 153.027),
    new google.maps.LatLng(11.291, 153.027)
  ];

  for (var i = 0; i < lineCoordinates.length - 1; i++) {
    var line = new google.maps.Polyline({
      path: [lineCoordinates[i], lineCoordinates[i + 1]],
      strokeOpacity: 0,
      icons: icons[i],
      strokeColor: color[i],
      map: map
    });
  }

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

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

来源：https://stackoverflow.com/questions/31096994/google-map-polyline-dashed-and-double-lines

标签

javascript

google-maps-api-3

symbols

polyline