Google Maps JS API 中的虚线折线未在 iOS 上显示

Question

我正在使用 o运行ge 点折线来显示前几天的路线。

但我运行遇到 iOS 设备上不显示虚线折线的问题。

CodePen 示例：（带有 o运行ge 点路径）

let decoded_polyline = google.maps.geometry.encoding.decodePath(polyline);

let line_style = {
    path: "M 0,1 0,1",
    strokeColor: '#F5A623',
    strokeWeight: 6,
    strokeOpacity: 1,
    scale: 4,
};

prev_days_path = new google.maps.Polyline({
    path: decoded_polyline,
    strokeOpacity: 0,
    icons: [
        {
            icon: line_style,
            offset: '0',
            repeat: '10px',
        },
    ],
});
prev_days_path.setMap(exp[day].map);

示例：

Answer 1

M 0,1 0,1 似乎不是有效路径...

我不知道 how/why 它可以在桌面上运行，但我认为以下片段证明了我的意思：

<svg height="210" width="400">
  <path d="M 0,1 0,1" />
  Sorry, your browser does not support inline SVG.
</svg>

如您所见，没有显示任何内容...

如果我将 google.maps.SymbolPath.CIRCLE 用于 path，它对我有用（在桌面和 iOS 上）。

function initialize() {
  // Map init
  let map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 30.803713,
      lng: -98.02602,
    },
    zoom: 5,
  });

  // Previous days polyline
  let polyline = '}i{fEb`moQbB_HqU}E_a@mQeUwG|GdpGoChtXdRr}Dzc@pfAjMrpB~Mn|C|KpvA`}@j{C|J|gE_SbsHsKreGflBteHy@feF}`@d~Bo_@ldFoqCtpNbdB`_J|hAbzGcEb`KzN`oC|p@n}CvzB~aJ|`AxwDn_BnpCz_G`wH|fCrrFtqD~gGny@lxDpVhlH`{EjqP~sBh_I~i@xaH\|pDlNzdDha@hwJln@poAlz@loH|{@fjEzeAdiAh]rqAryBxzH`aCt|FhM`sBb|@vjCbpAzhArj@hgAxk@~vCN|sGNtsLEtmNsDphMwTvsGpg@leFfGdeGuiAr`KqcAdkM}j@jfDkKruF}cAzzNm}BtnUwo@lvDulCtdE_eC~dEcThlC|`@r|Cd|@bbE`pAfcGrMtxEb@pxJgi@bvHkt@dvB}PhaBfXbuByp@fxHyo@r~Dmd@n~@vAxgBx}@raJk_@~bD_Ob~DeTrsAhJjkCv`@`_G|k@zkEfqCjhCdn@fl@lSd~Bwc@xvHvk@h}Gwz@vfDfEvnCkwB|kHq_B|oC{`Fr{EuaFdwFewDtbDe~HxhFchBz_B}eBdmC}`AnkFw|AziEomArmBiSr|Es`ArcGcKnoRwf@drL_n@|dHs{BpcPmf@`oH}O~kKdTr`Ksd@np@~OnpGhs@jaXj_AblH~tA~eGaPx|@rf@`|DpqC`vS~_AjvHaSxi@rGdxAvZl`Axi@bt@la@p~Cdf@dtDon@jXuh@vKiwBhd@qHoE`CfGxu@aPdjBc`@fv@_PuPopAcf@qtD_YymBog@{`EwpD{`XgkAaxIbDo`Byz@kgDibA{{Hsk@wcL_p@syUnd@_s@wE}|B{AaeQxrAabPp}BcnRjo@qqKzHgpOnEsaG|{@_sDzHkfEbtA}jC_Jgv@lLe[jcAmn@nZwcAlw@edFlgD{zElfJcfGz`FelExuGgpHlpCadCf{AqgCteCw_JqPkbBdRw`Abk@guBap@ahGvc@czHiR}{B_]gc@qiCkyBix@saDma@gqDcWsaHnf@mlD|LwnDnMa_Bgj@mfFuTmsEb|@mpBzeAmpNmRo`Blj@e|Bxd@i|Cl`@stF{@uoLuLwkCke@qmCcvAgkGus@ysCbMi}DfxFscJlr@opAvUklBj{AmkO|uAykPn[ieGc@ieC`a@i{Btl@i{Etb@i`H|`@}oDfv@ygJcc@efFqSi_DrOgjErGc_Fr@i~GJ{tLWk}OAi~Coc@saE}p@{bBqpAsfAmgAavD}ZwbCssBc{Eqx@au@y^cT';

  let decoded_polyline = google.maps.geometry.encoding.decodePath(polyline);

  // Draw a orange dotted path
  let line_style = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  prev_days_path = new google.maps.Polyline({
    path: decoded_polyline,
    strokeColor: '#F5A623',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: line_style,
      offset: '0',
      repeat: '10px',
    }, ],
  });
  prev_days_path.setMap(map);
}

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize" async defer></script>

如果我使用有效路径，它也有效：

function initialize() {
  // Map init
  let map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 30.803713,
      lng: -98.02602,
    },
    zoom: 5,
  });

  // Previous days polyline
  let polyline = '}i{fEb`moQbB_HqU}E_a@mQeUwG|GdpGoChtXdRr}Dzc@pfAjMrpB~Mn|C|KpvA`}@j{C|J|gE_SbsHsKreGflBteHy@feF}`@d~Bo_@ldFoqCtpNbdB`_J|hAbzGcEb`KzN`oC|p@n}CvzB~aJ|`AxwDn_BnpCz_G`wH|fCrrFtqD~gGny@lxDpVhlH`{EjqP~sBh_I~i@xaH\|pDlNzdDha@hwJln@poAlz@loH|{@fjEzeAdiAh]rqAryBxzH`aCt|FhM`sBb|@vjCbpAzhArj@hgAxk@~vCN|sGNtsLEtmNsDphMwTvsGpg@leFfGdeGuiAr`KqcAdkM}j@jfDkKruF}cAzzNm}BtnUwo@lvDulCtdE_eC~dEcThlC|`@r|Cd|@bbE`pAfcGrMtxEb@pxJgi@bvHkt@dvB}PhaBfXbuByp@fxHyo@r~Dmd@n~@vAxgBx}@raJk_@~bD_Ob~DeTrsAhJjkCv`@`_G|k@zkEfqCjhCdn@fl@lSd~Bwc@xvHvk@h}Gwz@vfDfEvnCkwB|kHq_B|oC{`Fr{EuaFdwFewDtbDe~HxhFchBz_B}eBdmC}`AnkFw|AziEomArmBiSr|Es`ArcGcKnoRwf@drL_n@|dHs{BpcPmf@`oH}O~kKdTr`Ksd@np@~OnpGhs@jaXj_AblH~tA~eGaPx|@rf@`|DpqC`vS~_AjvHaSxi@rGdxAvZl`Axi@bt@la@p~Cdf@dtDon@jXuh@vKiwBhd@qHoE`CfGxu@aPdjBc`@fv@_PuPopAcf@qtD_YymBog@{`EwpD{`XgkAaxIbDo`Byz@kgDibA{{Hsk@wcL_p@syUnd@_s@wE}|B{AaeQxrAabPp}BcnRjo@qqKzHgpOnEsaG|{@_sDzHkfEbtA}jC_Jgv@lLe[jcAmn@nZwcAlw@edFlgD{zElfJcfGz`FelExuGgpHlpCadCf{AqgCteCw_JqPkbBdRw`Abk@guBap@ahGvc@czHiR}{B_]gc@qiCkyBix@saDma@gqDcWsaHnf@mlD|LwnDnMa_Bgj@mfFuTmsEb|@mpBzeAmpNmRo`Blj@e|Bxd@i|Cl`@stF{@uoLuLwkCke@qmCcvAgkGus@ysCbMi}DfxFscJlr@opAvUklBj{AmkO|uAykPn[ieGc@ieC`a@i{Btl@i{Etb@i`H|`@}oDfv@ygJcc@efFqSi_DrOgjErGc_Fr@i~GJ{tLWk}OAi~Coc@saE}p@{bBqpAsfAmgAavD}ZwbCssBc{Eqx@au@y^cT';

  let decoded_polyline = google.maps.geometry.encoding.decodePath(polyline);

  // Draw a orange dotted path
  let line_style = {
    path: 'M-5,0a5,5 0 1,0 10,0a5,5 0 1,0 -10,0',
    fillOpacity: 1,
    scale: 1
  };

  prev_days_path = new google.maps.Polyline({
    path: decoded_polyline,
    strokeColor: '#F5A623',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: line_style,
      offset: '0',
      repeat: '10px',
    }, ],
  });
  prev_days_path.setMap(map);
}

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize" async defer></script>

您可以使用this tool根据圆半径生成路径。

Google Maps JS API 中的虚线折线未在 iOS 上显示

Dotted Polyline in Google Maps JS API not displaying on iOS

javascript

svg

google-maps

google-maps-api-3