javascript - Google map 多边形无法在 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 和 10 中呈现的方式。几天来，我已经在谷歌上搜索并尝试了几种替代方案来解决这个问题，但都没有奏效，这是我迄今为止尝试过的方法:

• 使用IE兼容模式()
• 使用 IE 向后兼容 ()
• 在出现 css/html5 问题时使用前缀(使用 prefixer.js)
• 使用 excanvas 实现 IE 兼容性
• 使用 modernizer(但它表明 IE 支持 Canvas ，但不了解支持的范围。
• 使用 html5shiv，以防 IE 出现 html5 元素问题
• 更改所有 css 以显示为 block (包括 Canvas 标签)
• 在 Firebug 和 IE 工具控制台中检查错误，但没有检测到。
• 检查所有功能是否有错误，但未检测到错误

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

代码更改自:

到:

这是旧浏览器兼容性的 View ，所以我想谷歌地图呈现不同(没有 Canvas )然后它正确显示多边形但制动页面中的其余 html5 元素和 css。此外，这由用户而非网站控制。

就像您在上图中看到的那样。

所以我的问题(可能的解决方案/想法)是:

• 有没有办法强制谷歌地图在没有 Canvas 的情况下呈现仅适用于 IE 浏览器？
• 这是否与我不知道的任何 css 属性有关？(它不使用 css 来创建状态形状，但以防万一)
• 是否有任何 JS 可以解决此类问题？
• 在使用 Google map 和 IE 时，我是否遗漏了什么？
• 你们还有其他想法吗？

在此先感谢您的任何输入/帮助:)

Answer 1

我确实按照 Michael Geary 的建议将整个事情分开，事实证明对于 IE 中的谷歌地图，CSS 继承可能会影响多边形在屏幕上的呈现方式。各个多边形层从它的父级之一继承了 css“height:auto”，似乎 IE9 和 10 对此非常敏感。所以答案是从父元素(容器框)的 css 文件中删除“height:auto”。