在DOM中从SVG创buildGoogle Maps MarkerImage
我试图在Google Maps中创build一个dynamic的SVG标记（基本上每个标记都具有SVG的文本部分），但是我正在努力处理它的dynamic方面。 正如你可以在下面的代码中看到的，我可以使用静态url中的new google.maps.MarkerImage()创build一个SVG标记。
var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.4269929, -81.7921109), icon: new google.maps.MarkerImage('https://dl.dropboxusercontent.com/u/64084190/test-marker.svg', null, null, null, new google.maps.Size(25, 25)), map: map });
但我似乎无法得到的google.maps.MarkerImage()采取一个SVG DOM元素的内部HTML作为其第一个参数 – 它总是在寻找一个URL。
<svg id="svg_elem"></svg> function createDynamicSVGMarker(id){ var svg_elem = d3.select('#svg_elem'); svg_elem.append('path') .attr('fill', "#3875D7") .attr('d', "M100 0h-100v100h36.768l13.431 19.876 13.431-19.876h36.37z"); svg_elem.append('text') .attr('transform', "translate(30.979 80)") .attr("fill", "#fff") .attr("font-size", "36") .text(id); var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.4269929, -81.7921109), icon: new google.maps.MarkerImage($('#svg_elem').html(), null, null, null, new google.maps.Size(25, 25)), map: map }); $('#svg_elem').empty(); }
我应该使用MarkerImage还是有更好的方法来解决这个问题？ 我试图在node.js（但最终失败）做到这一点 – 为每个id创build一个新的SVG（甚至创buildSVG，然后保存为一个PNG） – 但我认为这将是更有效客户端。 我打开使用node.js或客户端代码的build议。
MarkerImage在Maps v3中已被弃用。
在任何情况下，请查看开发人员指南中的符号 ，然后查看此示例 ：
基于这个例子，试试这个：
var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.4269929, -81.7921109), icon: { path: $('#svg_elem').attr('d'), //style elements: fillColor, strokeWeight, etc // ... }, map: map });
我不确定是否可以在一个SVGpath（文本等）中获得所需的所有内容，但是这应该可以帮助您实现这一目标。 Google Maps API中还有其他一些方法，可以在没有太多麻烦的情况下将文本置顶。
运行到上面的谷歌地图L.divIcon ，我只是决定开始使用单张，CSS3和L.divIcon ，请参阅我的解决scheme下面。
.markerIcon { width: 30px; height: 32px; box-shadow: 0 0 1px white; } .markerIcon .arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; margin: 0 auto; border-top: 8px solid #446cff; } .markerIcon .top { color: white; font-size: 11px; text-align: center; width: 30px; height: 32px; background-color: #446cff; line-height: 1.3em; padding-top: 2px; } <div class="markerHolder" style="display: none"> <div class="markerIcon"> <div class="top">HEADER<br><span id="value">888</span></div> <div class="arrow"></div> </div> </div> var $marker = $('#value').text('99'); var marker = new ftzMarker(L.latLng(lat, lng), { icon: L.divIcon({ html: $('.markerHolder').html() }) })
我能想到的唯一解决方法是必须创build两个标记，一个与图像和另一个与文本，并添加文本标记在图像标记相同的锚，但在它上面的一层。 这需要绑定两个标记的一些函数，如果你希望这个标记是可拖动的（一个事件监听器听一个标记，获取它的坐标，并且把这个坐标指定给第二个标记，所以它也被移动了。可能。
有一个解决scheme，在这种情况下可能会有所帮助。
您可以使用base64编码的svg替代“URL”：
var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>'; icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);
JavaScript（Firefox）btoa（）用于从SVG文本中获取base64编码。 您也可以使用http://dopiaza.org/tools/datauri/index.php来生成基础数据url。
这里是一个完整的例子jsfiddle ：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var template = [ '<?xml version="1.0"?>', '<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">', '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>', '</svg>' ].join('\n'); var svg = template.replace('{{ color }}', '#800'); var docMarker = new google.maps.Marker({ position: new google.maps.LatLng(-33.92, 151.25), map: map, title: 'Dynamic SVG Marker', icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) } }); </script> </body> </html>
附加信息和使用InfoBox的其他解决scheme可以在这里find。
虽然这个答案对你来说可能已经太晚了，但是也可以帮助其他人寻找解决同样问题的方法。