Рисование кругов для Polyline в Google maps

Question

Итак, я нашел это, что позволяет нарисовать пунктирную линию, но я хочу нарисовать пунктирную линию кругами. Я не могу изменить путь SVG в инструментах разработчика Google Chrome, и когда я пытаюсь использовать Sketch, его вывод SVG (см. Ниже) не работает с картами Google.

"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"></script> 
 
<div id="map"></div>