外部 SVG 作为 Google 地图 api 标记 - 是或否答案

【问题标题】：External SVG as Google maps api marker - Yes or No外部 SVG 作为 Google 地图 api 标记 - 是或否
【发布时间】：2016-08-04 21:45:33
【问题描述】：

假设我有一个地图应用程序，我正在使用一些外部用户数据创建标记。用户可以定义他们想要用作标记图标的自定义图像的路径。我的问题是 svg 文件。在阅读了相关的 stackoverflow 线程并尝试了建议的解决方案后，我仍然无法在 Firefox 和 IE 上使用它。

有人说 Google Maps API 不支持将外部 svg 文件作为图标，使其工作的唯一方法是使用路径表示法，但有人说可以使用外部文件，但使用 google.maps.Icon目的。

问题：在那个时间点，我们是否可以使用外部 svg 作为标记图标以及如何使用的确切答案。

这是我的fiddle 的链接，带有一个简单的示例。

我正在创建如下标记

 marker = new google.maps.Marker({
    position: {
      lat: -34.397,
      lng: 150.644
    },
    title: 'SVG Marker',
    icon: {
      url: 'https://cdn.shopify.com/s/files/1/0250/8090/files/R_final.svg',
      anchor: new google.maps.Point(10, 10),
      //scaledSize: new google.maps.Size(20, 20),
      size: new google.maps.Size(50, 50)
    },
    map: map

  });

Chrome - 有效。

Firefox , IE - 标记不显示。

如果我取消注释 scaleSize 属性，我会在 IE 上进行奇怪的缩放。 Firefox 仍然不显示。

路径表示法对我来说似乎不是一个选项，只要您能指出从文件中提取它的方法即可。

感谢您对此的意见。

【问题讨论】：

标签： javascript google-maps svg google-maps-api-3

【解决方案1】：

至少对于 Firefox，取消注释 scaledSize，并将此属性添加到标记：

optimized:false

这仍然适用于 Chrome，但我无法在 IE 上进行测试。

你可以在my fiddle看到它。

注意：我调整了你的（没有回调/异步/延迟，并立即调用 initMap），因为它甚至没有在 Firefox 上显示地图。

【讨论】：