如何在Google Maps API v3中使用SVG标记 [英] How to use SVG markers in Google Maps API v3

问题描述

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

解决方案

您可以使用 SVG路径符号呈现您的图标。

有关更多信息，请参阅 Google文档 。

以下是一个基本的例子：

  var icon = { 
 
路径：M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0，
 fillColor：'＃FF0000'，
 fillOpacity：.6，
 anchor：新的google.maps.Point（0,0），
 strokeWeight：0，
比例：1 
} 
 
 var marker = new google.maps.Marker（{
 position：eve nt.latLng，
 map：map，
 draggable：false，
 icon：icon 
}）; 
  

下面是一个有关如何显示和缩放标记SVG图标的示例：

JSFiddle演示

编辑：

另一个带有复杂图标的示例：

JSFiddle演示

编辑2：

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

JFFiddle演示

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/

解决方案

You can render your icon using the SVG Path notation.

See Google documentation for more information.

Here is a basic example:

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

Here is a working example on how to display and scale a marker SVG icon:

JSFiddle demo

Edit:

Another example here with a complex icon:

JSFiddle demo

Edit 2:

And here is how you can have a SVG file as an icon:

JSFiddle demo

这篇关于如何在Google Maps API v3中使用SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！