在谷歌地图中为多段线绘制圆

Drawing circles for Polyline in Google maps

本文关键字：段线 绘制 谷歌地图      更新时间：2023-09-26

所以我找到了这个，它允许画虚线，但我想画一条带圆圈的虚线。我似乎无法在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

一个选项是使用内置的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>

相关文章：