我在谷歌地图中调整图标大小时遇到问题。 我有一个 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">
【问题讨论】：
标签： google-maps svg resize icons marker
我也无法使用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 的链接上方找到了这个：
将 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，图形将被截断。
【讨论】：
正如 kaplan 指出的，您可以使用 size 和 scaledSize 调整 SVG 标记的大小。在我的例子中，结果仍然是错误的 - 相同图标的某些实例被正确渲染，而另一些则在地图上留下了奇怪的伪影。
我以一种非常简单的方式解决了这个问题：我在<svg> 元素中定义了width 和height。
【讨论】：
我知道这是一篇旧帖子，所以只是我的更新。
这对我来说不需要使用 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图标的大小。
【讨论】：
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 );
【讨论】：
遇到了同样的问题，用 scale 解决了：
MyGreenSVG = {
url: 'greenFill.svg',
scale: 0.5
};
奇怪的是，我昨天花了一个小时试图让它工作，但它没有，今天我将数字从 0.3 更改为 0.2，并且工作得很好。所以要小心缓存和其他东西。
【讨论】：
url 属性没有任何关系。
scale 对我的 svg 没有任何影响