javascript - 在 Google map 中绘制折线的圆圈

Question

所以我发现这个可以画一条虚线，但我想画一 strip 圆圈的虚线。我似乎无法在 Google Chrome 开发者工具中修改 SVG 路径，并且当我尝试使用 Sketch 时，其 SVG 输出(见下文)不适用于 Google map 。

"M0.641033737,6.81266823 C1.92338672,8.94131706 4.69065725,9.63151105 6.82190547,8.35425965 C8.95315369,7.07700826 9.64131924,4.3159806 8.35896626,2.18733177 C7.07661328,0.0586829401 4.30934275,-0.63151105 2.17809453,0.645740345 C0.0468463147,1.92299174 -0.641319243,4.6840194 0.641033737,6.81266823 L0.641033737,6.81266823 Z"

https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed

Answer 1

一种选择是使用内置的 google.maps.SymbolPath.CIRCLE

代码片段:

// 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: google.maps.MapTypeId.TERRAIN
  });

  // [START region_polyline]
  // Define a symbol using SVG path notation, with an opacity of 1.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 1,
    fillOpacity: 1,
    scale: 3
  };

  // Create the polyline, passing the symbol in the 'icons' property.
  // Give the line an opacity of 0.
  // Repeat the symbol at intervals of 20 pixels to create the dashed effect.
  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'
    }],
    map: map
  });
  // [END region_polyline]
}
google.maps.event.addDomListener(window, "load", initMap);

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

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