javascript - 谷歌地图折线虚线和双线

Question

我有一个谷歌地图折线 sample here有四个坐标。我使用 symbol 属性绘制了虚线，

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

但是我怎样才能只在第二个和第三个坐标之间画虚线，在第三个和第四个坐标之间画一条双线呢？

Answer 1

您不能为单条折线的单独线段设置样式。您需要制作单独的多段线，然后将您想要的样式应用于每条单独的多段线:

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

代码片段:

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>