google-maps - 如何在 Google Maps API v3 中使用 SVG 标记

Question

我可以使用转换后的 image.svg 作为谷歌地图图标吗？我正在将 png 图像转换为 svg，我想使用它，就像可以旋转的谷歌地图符号一样。我已经尝试使用谷歌地图符号，但我想要一个像汽车、男人等图标...这就是为什么我将一些 png 文件转换为 svg，就像这个示例网站他对这些使用什么 http://www.goprotravelling.com/

Answer 1

您可以使用 SVG Path notation 渲染您的图标.

参见Google documentation了解更多信息。

这是一个基本示例:

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 图标的工作示例:

JSFiddle demo

编辑:

这里还有一个带有复杂图标的示例:

JSFiddle demo

编辑2:

以下是如何将 SVG 文件作为图标:

JSFiddle demo