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

err*_*old 9 icons svg google-maps resize marker

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

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

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

属性:大小不会改变我的图标大小,但只会裁剪它.唯一的方法是改变我的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">
Run Code Online (Sandbox Code Playgroud)

kap*_*lan 17

我也无法调整大小scale.我确实发现,如果我使用a 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);
Run Code Online (Sandbox Code Playgroud)

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

更新(04/14/2015)

我在复杂图标底部的文档上找到了这个,并在符号链接的上方:

将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));
Run Code Online (Sandbox Code Playgroud)

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)
};
Run Code Online (Sandbox Code Playgroud)

我正在玩这个size并且在这里scaledSize一个例子.好像我可以评论出来size并且scaledSize工作正常.如果size小于scaledSize图形被切断.


wor*_*art 6

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

我在一个非常简单的方法解决了这个问题:我定义widthheight<svg>元素.


小智 -1

有同样的问题,它通过使用比例解决:

MyGreenSVG = {
    url: 'greenFill.svg',
    scale: 0.5
};
Run Code Online (Sandbox Code Playgroud)

奇怪的是,我昨天花了一个小时试图让它工作,但没有成功,今天我将数字从 0.3 更改为 0.2 并且工作完美。所以要小心缓存之类的东西。