svg 图像作为标记，在 svg 图像中具有动态变化值

Question

我为标记创建了一个 svg 图像，如下所示。

var testIcon = {
      anchor: new google.maps.Point(10, 10),
      url: 'data:image/svg+xml;utf-8,
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/>
        <line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/>
        <circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/>
        <text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">
        00:15:30
        </text>
        <circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/>
        <circle cx="10" cy="60" r="5" fill="skyblue"/>
        <text x="8" y="63" fill="#000000" font-size="9">
        3
        </text>
      </svg>'

    }

    marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: testIcon,
      title: 'Hello World!'
    });

我的 svg 图像中有计时器（00:15:30），我想根据一些操作更改计时器。如何使用 JavaScript 更改计时器值。当我尝试使用$('#svg_timer_value').innerHTML="00:16:30" 更新计时器时， id #svg_timer_value 无法从 javascript 访问。如何访问 svg 文件中定义的 id 或类？

Answer 1

您需要使用更新的文本重新创建图标：

setInterval(function() {
  var d = new Date();
  var hr = d.getHours();
  if (hr < 10) {
    hr = "0"+ hr;
  }
  var min = d.getMinutes();
  if (min < 10) {
    min = "0" + min;
  }
  var sec = d.getSeconds();
  if (sec < 10) {
    sec = "0" + sec;
  }
  var time = hr+":"+min+":"+sec;
  var testIcon2 = {
    anchor: new google.maps.Point(10, 10),
    url: 'data:image/svg+xml;utf-8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/><line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/><circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/><text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">'+time+'</text><circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/><circle cx="10" cy="60" r="5" fill="skyblue"/><text x="8" y="63" fill="#000000" font-size="9">3</text></svg>'
  }
  marker.setIcon(testIcon2);
}, 1000)

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var time = "00:15:30";
  var testIcon = {
    anchor: new google.maps.Point(10, 10),
    url: 'data:image/svg+xml;utf-8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/><line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/><circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/><text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">' + time + '</text><circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/><circle cx="10" cy="60" r="5" fill="skyblue"/><text x="8" y="63" fill="#000000" font-size="9">3</text></svg>'
  }
  marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: testIcon,
    title: 'Hello World!'
  });
  time = "11:11:11";
  setInterval(function() {
    var d = new Date();
    var hr = d.getHours();
    if (hr < 10) {
      hr = "0" + hr;
    }
    var min = d.getMinutes();
    if (min < 10) {
      min = "0" + min;
    }
    var sec = d.getSeconds();
    if (sec < 10) {
      sec = "0" + sec;
    }
    var time = hr + ":" + min + ":" + sec;
    var testIcon2 = {
      anchor: new google.maps.Point(10, 10),
      url: 'data:image/svg+xml;utf-8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/><line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/><circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/><text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">' + time + '</text><circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/><circle cx="10" cy="60" r="5" fill="skyblue"/><text x="8" y="63" fill="#000000" font-size="9">3</text></svg>'

    }
    marker.setIcon(testIcon2);
  }, 1000)
}
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>