jquery - 在 DOM 中从 SVG 创建 Google map MarkerImage

Question

我正在尝试在 Google map 中创建一个动态 SVG 标记(基本上每个标记的 SVG 文本部分都会发生变化)，但我在其动态方面遇到了困难。正如您在下面的代码中看到的，我可以使用静态网址中的 new google.maps.MarkerImage() 创建一个 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创建一个新的SVG(或者甚至创建SVG然后另存为PNG) - 但我认为在客户端。我愿意接受使用 Node.js 或客户端代码的建议。

Answer 1

MarkerImage 已在 map v3 中弃用。

无论如何，请查看Symbols from the Developers Guide ，然后 this example :

根据该示例，尝试以下操作:

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
});

我不确定您是否可以在一个 SVG 路径(文本等)中获得您想要的所有内容，但这应该可以帮助您实现大部分目标。 Google Maps API 中还有其他方法可以轻松获取顶部的文本。