如何在 Google Maps v3 api 中的端点处绘制带有箭头的虚线折线？

Question

我想画一条末端带有箭头的虚线折线。问题是，看起来 strokeOpacity 应该出现在图标数组上，但是对于虚线它需要为 0，而对于绘制箭头则需要为正值。有没有解决的办法？

这是一个说明困境的示例：https://jsfiddle.net/hrabinowitz/1ckk2c2L/18/

关键的代码是 javascript：

// This example converts a polyline to a dashed line, by
// setting the opacity of the polyline to 0, and drawing an opaque symbol
// at a regular interval on the polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 20.291, lng: 153.027},
    mapTypeId: 'terrain'
  });

  // Define a symbol using SVG path notation, with an opacity of 1.
  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
  };

  var arrowSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    strokeColor: 'red'
  }

  // Create the polyline.  If strokeOpacity is 0, the dashedLine shows.  
  // If strokeOpacity is 1, the arrow shows. 
  // How to show both? 
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px',
      strokeOpacity: 1
    },
    {
      icon: arrowSymbol,
      offset: '100%',
      strokeOpacity: 1,
      strokeColor: 'black'
    }
    ],
    map: map
  });
}

Answer 1

设置箭头符号的不透明度：

  icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    offset: '100%',
    fillColor: "black",
    fillOpacity: 1,
    strokeOpacity: 1,
  }

概念证明小提琴

代码片段：

  icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    offset: '100%',
    fillColor: "black",
    fillOpacity: 1,
    strokeOpacity: 1,
  }

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 20.291,
      lng: 153.027
    },
    mapTypeId: 'terrain'
  });

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

  var line = new google.maps.Polyline({
    path: [{
      lat: 22.291,
      lng: 153.027
    }, {
      lat: 18.291,
      lng: 153.027
    }],
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }, {
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        offset: '100%',
        fillColor: "black",
        fillOpacity: 1,
        strokeOpacity: 1,
      }
    }],
    map: map
  });
}

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}