Chrome 设备模式下的谷歌地图标记图标周围的空白区域

Question

我正在尝试使用 svg 文件作为我的标记图标。一切看起来都很棒，除了标记周围有一个巨大的空白空间，这使得它们在分组时难以与之交互。我尝试使用icon.size和icon.scaledSize来解决我的问题，但我仍然无法删除空白区域。也许这是我的 svg 文件？

function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: 'assets/icons/art.svg'
}
});
}

这是SVG(转换为PNG( 有问题的实际 svg

这是问题所在

编辑：

事实证明，使用Chrome的设备模式会干扰地图渲染图标的方式。

在遵循@bonnie建议(从我的文件中裁剪任何多余的空白空间(、调整icon.scale和icon.scaledSize属性并退出设备模式后，我最终看到了预期的结果。

最后一个图标对象是：

icon = {
url: 'assets/icons/art.svg',
size: new google.maps.Size(35, 35),
scaledSize: new google.maps.Size(40, 40)
};

谷歌地图渲染icon.size为图像 &icon.scaledSize作为图像

我仍然不知道为什么Chrome的设备模式无法正确呈现标记图标。

Answer 1

SVG 的视框太大。如果在图形程序(如 Illustrator(中打开，则可以调整美工板的大小，使其在图形边缘周围没有空白区域。