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会干扰Maps渲染图标的方式。

在遵循@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)
};

渲染的Google地图 icon.size为image ＆icon.scaledSize为image

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

Answer 1

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

Chrome设备模式下Google Map Marker图标周围的空白

1 个答案: