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

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

this is the svg (converted to png) The actual svg in question

Here's the issue

编辑：

事实证明，使用 Chrome 的 Device Mode 会干扰地图呈现图标的方式。

在遵循@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 为 image &icon.scaledSize 为image

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

Answer 1

SVG 的视图框太大。如果您在 Illustrator 等图形程序中打开，您可以调整画板的大小，使其在图形边缘周围没有空白。