调整 Google 地图标记的 SVG 图标大小

Question

我在谷歌地图中调整图标大小时遇到了问题。我有一个svg文件可以使它具有响应性。

这是我调用svg文件的方式。

MyGreenSVG = {
    url: 'greenFill.svg',
    size: new google.maps.Size(20, 35)
};

属性：size 不会改变我的图标大小，而只是将其裁剪。 唯一的方法是在我的 SVG 文件中更改宽度和高度，并制作两个版本。 这样我失去了使用 SVG 的兴趣...

这是我的 SVG 文件的预览：

<svg version="1.1"
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">

- errold

Answer 1

我也无法使用scale进行调整大小。 我发现如果使用MarkerImage，则可以缩放svg并且看起来非常好，比png更加平滑。 不过，如果我正在使用MarkerImage，我不认为它还是一个“symbol”。

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: new google.maps.MarkerImage('icons/myIcon.svg',
    null, null, null, new google.maps.Size(200,200)),
  draggable: false,
  map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我也在寻找更好的解决方案。

更新（04/14/2015）

我在复杂图标的文档底部找到了这个，并且就在链接到符号的链接上方：

将MarkerImage对象转换为Icon类型

在Google Maps JavaScript API的3.10版本之前，复杂的图标被定义为MarkerImage对象。从3.10版本开始添加了Icon对象文字，用于替换MarkerImage。Icon对象文字支持与MarkerImage相同的参数，通过删除构造函数、在{}中包装以前的参数，并添加每个参数的名称，您可以轻松地将MarkerImage转换为Icon。例如：

var image = new google.maps.MarkerImage(
  place.icon,
  new google.maps.Size(71, 71),
  new google.maps.Point(0, 0),
  new google.maps.Point(17, 34),
  new google.maps.Size(25, 25));

变成

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

我正在尝试使用 size 和 scaledSize，这里有一个示例。似乎我可以将 size 注释掉，scaledSize 仍然有效。如果 size 小于 scaledSize，则图形会被裁剪。

- kaplan

---

谢谢Kaplan，你太棒了，它像魔法一样运行 :) - Kamlesh

Answer 2

正如kaplan指出的那样，您可以使用size和scaledSize调整SVG标记的大小。在我的情况下，结果仍然存在缺陷——同一图标的某些实例被正确渲染，而另一些则在地图上留下了奇怪的痕迹。

我用一个非常简单的方法解决了这个问题：在<svg>元素中定义了width和height。

- wortwart

Answer 3

我知道这是一篇旧文章，所以我来更新一下。

对于我来说，不使用MarkerImage也能实现这个功能，但是必须设置svg的宽度和高度属性。

您必须使用icon属性“scaledSize”来设置地图上图标的大小。

- Nicolai

Answer 4

这里有一个关于根据缩放比例调整标记大小的解决方案。

  var someMarker;
  var title = "Some title";

  // A SVG flag marker
  someMarker = new google.maps.Marker({
      position: latlon,
      map: map,
      icon: {
          path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag
          scale: 1.0,
          fillColor: "#E6BD00",
          fillOpacity: 0.8,
          strokeWeight: 0.3,
          anchor: new google.maps.Point(0, 0),
          rotation: 0
      },
      title:title
  });

  // scale marker on different zooms
  google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoom = map.getZoom();
      var picon = someMarker.getIcon();

      if(zoom >=16 && zoom <= 17 && picon.scale != 0.6)
      { picon.scale=0.6;
        someMarker.setOptions({icon:picon});
      }
      else if(zoom == 18 && picon.scale != 0.8)
      {
        picon.scale=0.8;
        someMarker.setOptions({icon:picon});
      }
      else if(zoom > 18 && picon.scale != 2.0)
      {
        picon.scale=2.0;
        someMarker.setOptions({icon:picon});
      }
  });

- Morey

Answer 5

var icon = marker.icon; // make a copy of the svg icon currently in there
icon.scale = newValue; // change it to whatever new value
marker.setOptions({icon:icon}); // dump it back into the map

我让我的标记器脉冲以引起注意：

var iconscale = 0;
function animateMarker() {
    iconscale += .05; // sin() is in rads, not degs
    var icon = marker.icon;
    icon.scale = 1.8 + 0.3 * Math.sin(iconscale); // pulse around scale of 1.8
    marker.setOptions({icon:icon});
}

setInterval( animateMarker, 100 );

- Travis

Answer 6

对于单路径 SVG 图标，以下代码适用于我

var icons = {
        path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
        strokeColor: '#f00',
        fillColor: '#0000ff',
        strokeWeight:1,
        scale: 0.15
    };

 marker= new google.maps.Marker({
  position: latlng,
  map: map,
  icon: icons,
   });

在上面的代码中，scale用于改变Google地图标记中SVG图标的大小。

- Kishor N R

Answer 7

我曾经遇到过同样的问题，通过使用scale解决了它：

MyGreenSVG = {
    url: 'greenFill.svg',
    scale: 0.5
};

奇怪的是，昨天我花了一个小时试图让它工作，但没有成功。今天我把数字从0.3改成0.2，就完美地解决了。所以要小心缓存和其他东西。

- Gerardo Rosciano

---

你还做了什么其他的事吗？对我来说，在url属性与比例尺结合使用时似乎没有任何作用。 - Joscha

同样地，scale 对我的 SVG 没有任何影响。 - nickford