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

Question

我创建了一个标记以放置在 Google 地图上：

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
    }
});

这是结果：

正如你所看到的，这个圆圈看起来很波涛汹涌。有没有办法打造一个高质量的圈子？

Answer 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)
},

概念证明小提琴

处理 IE11 中问题的相关问题：

• 如何在 Google Maps API v3 中使用 SVG 标记
• javascript 中的 SVG 转换转换在 IE 11 中不起作用

代码片段：

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)
},

function initMap() {
  var pointA = new google.maps.LatLng(53.3163803, -6.2676661),
    myOptions = {
      zoom: 15,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "SVG icon",
      label: {
        text: "10",
        color: "white"
      },
      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)
      },
      map: map
    });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}