Javascript 在Google Maps API中使用三种不同边框颜色的圆圈标记

我有一个带有一个边框颜色的圆的CSS：

m=带标签的新标记({
职位:pos,，
地图：地图，
labelContent:txt，
labelAnchor：新的google.maps.Point（18,18），
标签类：“圆圈”，
图标：“/i/t.png”
});
.circle{
边框：6px实心#ffd511；
边界半径：30px；
-moz边界半径：30px；
-webkit边界半径：30px；
-khtml边界半径：30px；
宽度：30px；
高度：18px；
线高：20px；
填充：12px 6px；
文本对齐：居中；
}
17
你可以使用画布，像这样的东西就可以了：

<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var context2 = canvas.getContext('2d');
  var context3 = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 1.5 * Math.PI;
  var endAngle = 0.15 * Math.PI;
  var counterClockwise = false;

  //1st arc
  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 10;

  // line color
  context.strokeStyle = '#FFA325';
  context.stroke();

  //second arc
  startAngle=endAngle;
  endAngle=0.85 * Math.PI;
  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);


  // line color
  context.strokeStyle = '#FFBEC9';
  context.stroke();

  //third arc
  startAngle=endAngle;
  endAngle=1.5 * Math.PI;
  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);


  // line color
  context.strokeStyle = '#007F1B';
  context.stroke();
</script>


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var context2=canvas.getContext（'2d'）；
var context3=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var startAngle=1.5*Math.PI；
var endAngle=0.15*Math.PI；
var逆时针=假；
//第一弧
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
context.lineWidth=10；
//线条颜色
context.strokeStyle='#FFA325'；
stroke（）；
//第二弧
startAngle=端角；
端角=0.85*Math.PI；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
//线条颜色
context.strokeStyle='#FFBEC9'；
stroke（）；
//第三弧
startAngle=端角；
endAngle=1.5*Math.PI；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
//线条颜色
context.strokeStyle='#007F1B'；
stroke（）；

希望有帮助，你可以找到一个代码笔的链接，谢谢。看起来有一个解决方案，可以用CSS作为Google Maps API的标记

因此，我设法创建了一个图像，并将其用作Marker类
的背景

.circle {
  background: url('circle.png') no-repeat;
  width: 58px;
  height: 58px;
  line-height: 20px;
  text-align: center;
}

给它一个