Google地图多边形无法在IE中正确呈现（9和10）

Question

我希望这个问题不会混淆或太复杂。但是我们走了： 我正在创建一个自定义谷歌地图，使用“google.map.Polygon”方法将一些美国州呈现为多边形叠加。一切似乎都适用于所有浏览器，如下图所示，

当我说“所有浏览器”时，它们是Chrome，Firefox，Safari和Opera。但是当谈到IE（9-10）时，多边形的形状似乎会减半并且也会缩小，如下所示：

就像我之前说过的，我正在使用谷歌多边形方法：

 var obj = new google.maps.Polygon({
    paths: coords,
    strokeColor: sColor,
    strokeOpacity: sOpacity,
    strokeWeight: sWeight,
    fillColor: fColor,
    fillOpacity: fOpacity,
    lat:cLat,
    lng:cLng,
    north_bound:cNorthBound,
    south_bound:cSouthBound,
    name:name
    });

并且形状坐标点来自XML文件，如下所示： //我只是放置代码，以便更好地了解整个事情是如何组合在一起的

<state name="Louisiana" strokeColor="#D6D1CB" strokeOpacity="1" strokeWeight="2" fillColor="#004E98" fillOpacity="1" lat="31.2448234" lng="-92.1450245" north_bound="33.019544,-88.8162401" south_bound="28.9254296,-94.043352">
   <point lat="33.0225" lng="-94.0430"/>
   <point lat="33.0179" lng="-93.0048"/>
   <point lat="33.0087" lng="-91.1646"/>
   <point lat="32.9269" lng="-91.2209"/>
   <point lat="32.8773" lng="-91.1220"/>
   ..... etc

问题不是传递数据或创建形状，而是在IE 9＆amp; 10中呈现的方式。我已经google了几天，并尝试了几种方法来解决这个问题，但是没有一个能够解决这个问题，这是我迄今为止所尝试过的：

• 使用IE兼容模式（）
• 使用IE向后兼容性（）
• 使用前缀，以防它是css / html5问题（使用了prefixer.js）
• 使用excanvas实现IE兼容性
• 使用modernizer（但它显示IE支持画布，但不支持 知道支持的范围有多广。
• 使用html5shiv，以防IE出现html5元素问题
• 将所有css更改为显示为块（包括画布） 标签）
• 在Firebug和IE工具控制台中检查错误，但没有 检测。
• 检查所有功能是否有错误，但没有检测到

如果我点击IE的兼容性按钮

代码更改为：

为：

这是旧浏览器兼容性的视图，所以我认为谷歌地图呈现的方式不同（没有画布），然后它正确显示多边形，但在页面中制动其余的html5元素和css。此外，这是由用户控制的，而不是网站。

就像你可以在上面的图片中看到的那样。

所以我的问题（可能的解决方案/想法）是：

• 有没有办法强制谷歌地图在没有画布的情况下渲染 仅适用于IE浏览器？
• 这与我不知道的任何css属性有关吗？（它 不使用css来创建状态形状，只是以防万一）
• 是否有任何JS可以解决此类问题？
• 谷歌地图和IE浏览器有什么我想念的吗？
• 你们可能还有其他想法吗？

提前感谢任何输入/帮助：）

Answer 1

我确实将整个事情分开，正如Michael Geary所说，事实证明，对于IE中的谷歌地图，css继承可能会影响多边形在屏幕上的渲染方式。单个多边形图层从其中一个父母继承css“height：auto”，似乎IE9＆amp; 10对此非常敏感。 所以答案是从父元素（容器框）中的css文件中删除“height：auto”。

Answer 2

我害怕你吵来了所有错误的树木。但我想你已经知道了！ ： - ）

在这里，试试这个简单的例子：

https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

在没有你试过的任何技巧的情况下它在IE9和IE10中工作得很好，对吗？

这是你的存在证据：用 no 花哨的努力可以获得你想要的结果。

所以问题出在你的页面和那个简单例子之间的区别。解决方案不是在更多goop上进行分层，而是在页面中找到不同的内容。它很可能是你的CSS中的东西，但如果没有看到测试页就不可能猜到。

我可以保证一种方法可行：逐步将您的页面转换为该测试页面。从您的页面中逐一取出内容，并更改与测试页面不同的内容，从而更接近测试页面。最终，您所做的一项更改将使其正常工作，而这正是您需要解决的问题。

我可以保证这种方法的原因是，如果你不断更改你的页面，直到它更像测试页面，最终它将 测试页面，我们已经知道该页面有效。< / p>

这种方法很乏味，但绝对可以让你找到问题。

显然，您应该在每次更改之前备份代码，这样您就有了一条路径，可以隔离修复它的一个更改。最好的方法是使用诸如Mercurial或Git之类的DVCS。您可以创建临时存储库并随时提交每个更改，以便轻松返回任何更改，比较修订等。