Google 地图中的自定义标记未在 Firefox 中显示

Question

我有一张使用 google maps for rails gem 在rails 中创建的地图。它适用于 Chrome 和 Safari，但它不会在 Firefox 29 中显示自定义 .svg 标记。它会显示集群的自定义图像（即 png）。

我遇到了许多来自很久以前（FF 8 和 9）的线程，它们说在 9 或 10 中解决了与 cors 相关的问题。但是，这似乎已经有一段时间没有成为问题了，尤其是 29 岁。

有谁知道这是 Firefox 问题还是 google maps for rails gem 问题？如果是其中一个，解决方案是什么。

更新： 将 svg 换成 png 现在可以工作了。然而，这并不能解决根本问题。我想使用 svg 以便可以传入颜色变量。

仍然没有运气，chrome 和 firefox 都显示图像正在开发者工具中下载。该图像可在图像目录中的 Firefox 和 chrome 中查看。下面是我的 SVG 的代码：

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

Answer 1

尝试为您的 SVG 定义宽度和高度

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

我发现在绘制没有定义宽度/高度的 SVG 时可能会很挑剔。

加法

@Justin Lau 补充说，在 Javascript 中定义的标记将需要原始大小，即使您使用的是 scaledSize

非常感谢贾斯汀的贡献。

Answer 2

为了补充 Idiot211 的答案，除了将 width 和 height 属性添加到 SVG 元素之外，如果您之前只有 scaledSize，则必须使用 size 定义标记图标对象以使其在 FireFox 上工作.

// es6 syntax
const markerIcon = {
    url: '../map-marker.svg',
    size: new google.maps.Size(100, 100),     // original size you defined in the SVG file
    scaledSize: new google.maps.Size(50, 50), // desired display size
    anchor: new maps.Point(25, 50),
};

Answer 3

需要添加一个细节 - 当 SVG 通过数据 URL 提供并且 SVG 是 URL 编码（不是 base64 ..）时，Firefox 似乎在“#”上窒息，所以我不得不切换到使用 fill="rgb()" 表示法和/或命名颜色。

关于为什么/何时使用 SVG 数据 URL 的一些参考资料：https://codepen.io/tigt/post/optimizing-svgs-in-data-uris How to use SVG markers in Google Maps API v3

希望这对某人有所帮助！