如何在 Google Maps API v3 中使用 SVG 标记 [英] How to use SVG markers in Google Maps API v3
问题描述
我可以将转换后的 image.svg 用作谷歌地图图标吗?我正在将我的 png 图像转换为 svg,我想像谷歌地图符号一样使用它可以旋转.我已经尝试使用谷歌地图符号,但我想要一个像汽车、男人等的图标......这就是为什么我将我的一些 png 文件转换为 svg,就像这个示例站点一样,他对这些 http://www.goprotravelling.com/
Can I use my converted image.svg as google map icon. I was converting my png image to svg and I want to use this like google map symbol that can be rotated. I already tried to use the google map symbol but I want to have an icon like car, man, etc... That's why I converted my some png files to svg, just like this example site what does he use for these http://www.goprotravelling.com/
推荐答案
您可以使用 SVG 路径符号.
有关详细信息,请参阅 Google 文档.
See Google documentation for more information.
这是一个基本示例:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1
}
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon
});
这是一个关于如何显示和缩放标记 SVG 图标的工作示例:
Here is a working example on how to display and scale a marker SVG icon:
这里还有一个带有复杂图标的例子:
Another example here with a complex icon:
编辑 2:
这是将 SVG 文件作为图标的方法:
And here is how you can have a SVG file as an icon:
这篇关于如何在 Google Maps API v3 中使用 SVG 标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!