2

我希望这个问题不会令人困惑或太复杂。但我们开始了：我正在创建一个自定义谷歌地图，它使用“google.map.Polygon”方法将美国的一些州呈现为多边形叠加层。一切似乎都可以在所有浏览器中工作，如下图所示， Chrome、Firefox、Safari 和 Opera 中的多边形

当我说“所有浏览器”时，它们是 Chrome、Firefox、Safari 和 Opera。但是当涉及到 IE (9-10) 时，Polygon 形状似乎会减半并且还会缩小，如下所示：

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 兼容性
  • 使用现代化器（但它表明 IE 支持画布，但不知道支持的范围有多大。
  • 使用 html5shiv，以防 IE 遇到 html5 元素问题
  • 将所有 css 更改为显示为块（包括画布标签）
  • 检查 Firebug 和 IE 工具控制台中的错误，但未检测到错误。
  • 检查所有功能是否有错误，但未检测到错误

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

IE兼容性按钮

代码更改为：

标准 IE 源代码渲染

至：

兼容性源代码

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

在此处输入图像描述 就像你在上图中看到的那样。

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

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

提前感谢您的任何输入/帮助:)

4

2 回答 2

4

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

于 2013-05-15T16:50:04.080 回答
2

恐怕你找错树了。但我想你已经知道了！:-)

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

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

它在 IE9 和 IE10 中运行良好，没有您尝试过的任何技巧，对吧？

这就是你的存在证明：不费吹灰之力就能得到你想要的结果。

所以问题出在您的页面和那个简单示例之间的差异上。解决方案不是在更多 goop 上分层，而是在您的页面中找到不同之处。它很可能是您的 CSS 中的某些内容，但如果不查看测试页面就无法猜测。

我可以保证一种方法会奏效：逐渐将您的页面变成该测试页面。逐一从您的页面中取出内容，并更改与测试页面不同的内容，以更接近测试页面的方式工作。最终，您所做的一项更改将使其正常工作，这就是您需要解决的问题。

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

这种方法虽然繁琐，但绝对能让你找到问题所在。

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

于 2013-05-15T05:27:22.223 回答