Javascript 如何在谷歌地图上获得平滑标记（SVG图标）？

我创建了一个要放置在谷歌地图上的标记：

var compMarker = new google.maps.Marker({
    position: {lat: 33, lng: -118}
    map: map,
    label: {
        text: "10",
        color: "white",
        fontWeight: "bold"
    },
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 15,
        fillColor: "#4E90D9",
        fillOpacity: 1,
        strokeWeight: 1
    }
});

结果是：

---

正如你所看到的，这个圆圈看起来很起伏。有没有办法创建一个高质量的循环

一个选项是使用自定义SVG图标

icon: {
  url:'data:image/svg+xml;charset=utf-8,' + encodeURIComponent ('<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"><circle cx="110" cy="110" r="100" stroke="black" fill="#4E90D9" fill-opacity="1.0" stroke-width="10" /></svg>'),
  size: new google.maps.Size(200,200),
  scaledSize: new google.maps.Size(32,32),
  anchor: new google.maps.Point(16,16),
  labelOrigin: new google.maps.Point(16,16)
},

---

一个选项是使用自定义SVG图标

icon: {
  url:'data:image/svg+xml;charset=utf-8,' + encodeURIComponent ('<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"><circle cx="110" cy="110" r="100" stroke="black" fill="#4E90D9" fill-opacity="1.0" stroke-width="10" /></svg>'),
  size: new google.maps.Size(200,200),
  scaledSize: new google.maps.Size(32,32),
  anchor: new google.maps.Point(16,16),
  labelOrigin: new google.maps.Point(16,16)
},