在 Google Maps API 的 SVG 图标内添加文本

Question

我正在尝试使用 SVG 创建自定义 Google 地图图标。我已经走到这一步了。然而，我能找到的所有关于 SVG 的在线信息都使用这种符号：<> <>。

我正在尝试在 JS 对象内执行 SVG。谁能告诉我这种类型的 SVG 叫什么来帮助我，以便我可以找到学习它的地方？

我的目标是能够在圆圈内添加文本，但现在我的文本元素不起作用。谢谢！

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    strokeWeight: 1,
    scale: .5,
    text: "57"
}

Answer 1

如果您想在 SVG 标记内添加单个字符，Google Maps Javascript API v3 原生支持该功能Marker（“带标签的标记”）。

如果您想要多个字符，相关问题：Google 地图具有多个字符的标记标签

代码片段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.405, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: {
      path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
      fillColor: '#FF0000',
      fillOpacity: .6,
      strokeWeight: 1,
      scale: .5,
      text: "57"
    },
    label: "B"
  })

}
google.maps.event.addDomListener(window, "load", initialize);

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

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

Answer 2

要将自定义标记添加到谷歌地图：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  //define your marker
  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

 //put the marker on the map
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
 var contentString = '<div id="content">'+
                     'lorem ipsum </div>'

 var infowindow = new google.maps.InfoWindow({
     content: contentString
 });

 marker.addListener('click', function() {
     infowindow.open(map, marker);
 });
}

有关 SVG 参考，您可以查看此处

如果您想玩一下，这里有一个 Plunker：https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview