google-maps - 调整谷歌地图标记的 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">

Answer 1

我也无法使用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);

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

更新(2015 年 4 月 14 日)

我在complex icons底部的文档中找到了这个就在 symbols 的链接上方:

Converting MarkerImage objects to type Icon

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter. For example:

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，图形就会被截断。