gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:37:26 25 4
gpt4 key购买 nike

我正在尝试在 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 或客户端代码的建议。

最佳答案

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 中还有其他方法可以轻松获取顶部的文本。

关于jquery - 在 DOM 中从 SVG 创建 Google map MarkerImage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24455614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com