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

Posted 2023-03-28

【中文标题】Chrome 设备模式下 Google 地图标记图标周围的空白区域

【英文标题】：Empty Space Around Google Map Marker Icons In Chrome Device Mode

【发布时间】：2019-02-23 02:03:14

【问题描述】：

我正在尝试使用 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 的设备模式无法正确呈现标记图标。

【问题讨论】：

请提供一个 minimal reproducible example 来证明您的问题（我们需要 .svg）

@geocodezip 感谢您的回复，我添加了一个我正在尝试使用的 .svg 链接。我还有什么可以帮助人们测试的吗？

【参考方案1】：

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

【讨论】：

我使用 Photoshop 检查过图标周围几乎没有空白。如果您查看svgur.com/s/8P9，它表明周围的空白几乎没有谷歌地图呈现的那么多。我还没有尝试缩小它，所以我会试一试。感谢您的回答！

当它放大或缩小地图时，您是否放大或缩小了地图，还是在地图初始加载时也这样做了？

缩放图像后，结果如下：i.imgur.com/wc9TwYr.png我担心无法配置谷歌地图标记图标尺寸。

它在初始加载时增加了周围的空间。我需要放大很远才能选择分组的标记。这也可能只是人们与地图互动的方式，而我太特别了？另一个想法是我正在使用 chrome 的响应式网络检查器，所以这可能会导致问题。

感谢您的帮助，在禁用设备模式并裁剪所有空白空间后，我现在看到了预期的结果。我已更新问题以解决设备模式无法正确呈现图标的原因。