我为标记创建了一个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"
更新计时器时,
无法从javascript访问id #svg_timer_value。如何访问svg文件中定义的id或classed。?
答案 0 :(得分:0)
您需要使用更新的文本重新创建图标:
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)
代码段
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>