如何使用多边形选项（JS）制作虚线符号（折线）答案

【问题标题】：How to make dashed line symbols (Polyline) using the polygonOptions (JS)如何使用多边形选项（JS）制作虚线符号（折线）
【发布时间】：2021-12-28 06:24:30
【问题描述】：

如何使用此界面制作虚线符号（折线） enter image description here

【问题讨论】：

标签： reactjs google-maps

【解决方案1】：

您似乎正在寻找this，您可以在其中将多段线转换为虚线，方法是将多段线的不透明度设置为 0，并在多段线上以固定间隔绘制一个不透明符号。

function initMap() {
  const 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.
  const lineSymbol = {
    path: "M 0,-1 0,1",
    strokeOpacity: 1,
    scale: 4,
  };
 
  const 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",
      },
    ],
    map: map,
  });
}

【讨论】：