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

Posted 2021-04-12

我在谷歌地图中调整图标大小有问题。我有一个svg文件让它响应。

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

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

属性：大小不会改变我的图标大小，但只会裁剪它。唯一的方法是改变我的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">

答案

我也无法使用scale调整大小。我确实发现，如果我使用MarkerImage然后我可以缩放svg并且它看起来相当不错，比png更好的程度。如果我使用的是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);

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

更新（04/14/2015）

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

将MarkerImage对象转换为Icon类型

在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，图形将被切断。

另一答案

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

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

另一答案

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

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

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

另一答案

这是基于缩放比例缩放标记的解决方案

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

另一答案

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

在上面的代码比例用于更改谷歌地图标记中的svg图标的大小。

另一答案

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

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

奇怪的是，我昨天花了一个小时试图使其工作而它没有，今天我将数字从0.3改为0.2并且工作得很好。所以要小心缓存和东西。