Google地图中的自定义标记不会显示在Firefox中 [英] Custom Markers in Google Maps not Showing up in Firefox

问题描述

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

I已经碰到了从过去的一些线索（FF 8和9），说有一个问题已经解决了9或10相关的Cors。然而，它似乎并没有一个问题一段时间，特别是不是29。

有谁知道这是一个Firefox的问题或谷歌地图的轨道宝石问题？如果是任何一个解决方案。

更新：
现在为png工作交换svg。但这并不能解决潜在的问题。我想使用svg，所以我可以传递颜色变量。

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

 <？xml version =1.0encoding =utf-8？> ; 
<！ - 生成器：Adobe Illustrator 17.1.0，SVG导出插件。 SVG版本：6.00 Build 0） - > 
<！DOCTYPE svg PUBLIC -  // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> 
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999 / xlinkx =20pxy =20px
 viewBox =0 0 15 15enable-background =new 0 0 15 15xml：space =preserve> 
 < / svg> 
  

解决方案

尝试为SVG定义宽度和高度

 <？xml version =1.0encoding =utf-8？> 
<！ - 生成器：Adobe Illustrator 17.1.0，SVG导出插件。 SVG版本：6.00 Build 0） - > 
<！DOCTYPE svg PUBLIC -  // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> 
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999 / xlinkx =20pxy =20pxheight =20pxwidth =20px
 viewBox =0 0 15 15enable-background =new 0 0 15 15xml：space = 保存 > 
 < / svg> 
  

我发现在绘制没有定义宽度/高度的SVG时，它可能是挑剔的。 >

加法
$ b @Justin Lau补充说，在Javascript中定义的标记将需要原来的大小，即使你使用scaledSize

非常感谢贾斯汀的贡献。

I have a map that I have created in rails using the google maps for rails gem. It works in Chrome and Safari but it does not display custom .svg markers in Firefox 29. It does display the custom image for clusters (which is a png).

I have bumped into a number of threads from the far past (FF 8 and 9) that said there was an issue that was resolved in 9 or 10 related to cors. However, it does not seem like it has been an issue for awhile, and especially not for 29.

Does anyone know if this is a firefox issue or google maps for rails gem issue? If it is either one what is the solution.

Update: Swapping svg for png works for now. This does not however solve the underlying issue. I would like to use a svg so I can pass in color variables.

Still no luck, both chrome and firefox show that the image is being download in developer tools. The image is viewable in firefox and chrome in the images directory. Below is the code for my 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>

解决方案

Try defining a width and height for your 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>

I have found that it can be picky when drawing SVGs with no defined width/height.

Addition

@Justin Lau has added that the marker when defined in Javascript will need the original size, even if you're using scaledSize

Many thanks to Justin for the contribution.

这篇关于Google地图中的自定义标记不会显示在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！