在谷歌地圖中為折線繪制圓圈

Question

所以我發現這個可以畫一條虛線，但我想畫一條帶圓圈的虛線。 我似乎無法在 Google Chrome 開發人員工具中修改 SVG 路徑，當我嘗試使用 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>