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

【问题标题】：Adding Text inside SVG icon for Google Maps API在 Google Maps API 的 SVG 图标内添加文本
【发布时间】：2016-09-20 19:56:44
【问题描述】：

我正在尝试使用 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"
}

【问题讨论】：

标签： javascript google-maps d3.js svg google-maps-markers

【解决方案1】：

如果您想在 SVG 标记内添加单个字符，Google Maps Javascript API v3 Marker (a "labelled marker" 原生支持。

如果您想要多个字符，相关问题：Google maps Marker Label with multiple characters

代码 sn-p：

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>

【讨论】：

【解决方案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 参考，您可以查看 here

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

【讨论】：

对不起，如果我不清楚。我很欣赏你的代码。我已经有了所有这些，我只是想弄清楚 SVG 属性对于文本来说是什么。我想在我的 SVG 中添加一个文本元素，以便为每个圆圈编号。
对于 SVG 文本参考，您可以在此处查看：w3.org/TR/SVG/text.html。但谷歌标记只接受路径。您可以将侦听器添加到您的标记中