如何在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

在箭头符号上设置不透明度：

class Customers(list):
    def __contains__(self, x):
        return any(x.first == y.first or x.last == y.last or x.address == y.address for y in self)

customers = Customers([customer_1, customer_2, customer_3])
Customer('Kim', 'G', 'Berlin') in customers
# True

proof of concept fiddle

代码段

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