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

概念證明小提琴

代碼片段：

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

 <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"> </script>