Question

我在谷歌地图中调整图标大小有问题。我有一个svg文件，以使其响应。

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

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

属性：size不会改变我的图标大小，只会裁剪它。唯一的方法是改变我的svg文件中的宽度和高度，并制作它的2个版本。所以我放松了使用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">

Answer 1

我也无法使用scale调整大小。我确实发现，如果我使用MarkerImage，那么我可以缩放svg，它看起来相当不错，比png更好，就像它是多么平滑。我不认为它是一个符号＆＃39;如果我使用MarkerImage，那就更多了。

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

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

更新（2015年4月14日）

我在complex icons底部的文档和symbols的链接上方找到了这个：

将MarkerImage对象转换为类型图标

在Google Maps JavaScript API版本3.10之前，复杂图标被定义为MarkerImage对象。 Icon对象文字已在3.10版本中添加，并从3.11版本开始替换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并且an example here。好像我可以评论size和scaledSize工作正常。如果size小于scaledSize，则图形会被切断。

Answer 2

正如卡普兰指出的那样，您可以使用size和scaledSize调整SVG标记的大小。在我的情况下，结果仍然是错误的 - 相同图标的一些实例被正确呈现，其他实例在地图上留下了奇怪的文物。

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

Answer 3

我知道这是一篇旧帖子，所以只是我的更新。

这对我来说不使用MarkerImage，但svg必须设置宽度和高度属性。

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

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

Answer 5

对于单路径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,
   });

上面代码比例中的

用于更改Google地图标记中svg图标的大小。

Answer 6

有同样的问题，它通过使用scale解决：

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

奇怪的是，我昨天花了一个小时试图让它发挥作用而且它没有，今天我将数字从0.3改为0.2并且完美地工作。所以要小心缓存和东西。

调整谷歌地图标记的svg图标

6 个答案: