在Google地图中绘制Polyline的圆圈 [英] Drawing circles for Polyline in Google maps

问题描述

所以我找到了这个可以绘制虚线的图，但我想用圆圈画一条虚线。我似乎无法修改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

代码段：
$ b

//此示例将多段线转换为虚线，通过//设置折线的不透明度为0，并在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}）; var lineSymbol = {path：google.maps.SymbolPath.CIRCLE，strokeOpacity：1，fillOpacity：1，scale：3}; // [START region_polyline] //使用SVG路径表示法定义一个符号，不透明度为1。 //创建折线，在'icons'属性中传递符号。 //给行赋予0不透明度。//以20像素为间隔重复该符号以创建虚线效果。 var line = new google.maps.Polyline（{path：[{lat：22.291，lng：153.027}，{lat：18.291，lng：153.027}]，strokeOpacity：0，图标：[{icon：lineSymbol，offset：' 0'，重复：'20px'}]，map：map}）; // [END region_polyline]} google.maps.event.addDomListener（window，load，initMap）;

  html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}  

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

So I found this which allows to draw a dashed line, but I want to draw a dashed line with circles. I can't seem to modify the SVG path in Google Chrome developer tools and when I try to use Sketch, its SVG output (see below) doesn't work with Google maps.

"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

解决方案

One option would be to use the built in google.maps.SymbolPath.CIRCLE

code snippet:

// 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>

这篇关于在Google地图中绘制Polyline的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！