Question

我有一个带有四个坐标的谷歌地图折线sample here。我使用符号属性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
    });

但是如何仅在第二和第三坐标之间绘制虚线以及在第三和第四坐标之间绘制双线？

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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌地图折线虚线和双线

1 个答案: