谷歌地图标记在Internet Explorer中被切成两半

Question

我在Internet Explorer中使用谷歌地图标记图标时遇到了奇怪的问题。所有的标记都被割成一半，重复出现并向右移动了50%。

这是使用谷歌的演示代码。所以我肯定在其他地方使用了奇怪的样式或jQuery，但我不知道是什么。有人之前遇到过这个问题吗？

- kennethj

---

最近我在JSFiddle上的Google地图演示中遇到了一些奇怪的行为。对我来说，渲染似乎没有很好地刷新。因此，我所做的是在应用地图更改后，使用map.setCenter（<new latlng>）;“刷新”它，然后重新缩放。此外，问题似乎与地图上的任何覆盖物有关。 - KJYe.Name

Answer 1

我遇到了类似的问题。问题在于每个标记图标都继承了margin>0，我通过将地图div中所有img的margin设置为零来解决了这个问题。

<style type="text/css">
   #map_canvas img {
       margin: 0px
   }
</style>

- djsm

---

这对我来说也是问题所在。该API为Firefox和Chrome生成不同的元素，因此无法使用Firebug。要查找在IE中让你困扰的样式，请使用IE7浏览器模式，并确保在地图加载后点击开发人员工具工具栏中的刷新按钮。这将刷新DOM并使您可以选择标记图像以进行检查。使用“跟踪样式”窗格查找有问题的样式。 - Jerph

Answer 2

您的问题很有趣，因为即使使用默认标记，也会发生这种情况。在2012年2月的一篇博客文章中，我描述了一个类似自定义标记的问题：http://www.gutensite.com/Google-Maps-Custom-Markers-Cut-Off-By-Canvas-Tiles 我们在使用Google Maps API版本3.8（比其他一些提出解决方案的版本要新）时遇到了问题。自定义标记将被截断，而默认标记则不会。我们发现这是由用于优化Google Maps显示方式的新画布瓦片引起的。如果您检查元素，您会发现标记实际上是瓦片层。

如果我们关闭“optimized”（请参见下面的代码），标记将正确显示！所以它似乎与优化代码有关。

var point = new google.maps.Marker({
'position': position,
'map': this.options.map.construct,  
'icon': marker_data.custom_icon,    
'title': marker_data.title, 
'optimized': false
});

我不确定谷歌是否已解决此问题，也不知道是否有更好的解决方案。

其他人建议使用parseInt()解析标记的宽度和高度，可以解决他们的问题。

请参见链接文章获取图片。由于我声望不够，Stackoverflow不允许我包含图片 :-\

- Chadwick Meyer

---

很棒的解决方案。解决了我的问题。我只需要在我的请求中添加 optimizeWaypoints: false, 即可。 - Tschallacka

我有同样的问题。答案现在已经四年了，但我认为它仍然有效。我不是说它不起作用，但在我的情况下没有效果。我必须将“optimized”设置为“true”才能解决问题。如果未使用或将“optimized”设置为“false”，则无论是基本的Google Maps标记还是自定义标记，我都只有一半的标记。我必须明确地将其设置为“true”才能解决问题。 - László Péter Varga

奇怪的是，我在过去1.5年中一直没有使用这个属性，我的引脚看起来完美无缺。突然间，它们被裁剪了。我尝试了各种“修复”方法，但都无济于事，后来偶然发现了这个方法并尝试了一下，结果解决了问题。真是太奇怪了，但是非常感谢你的分享。 - langauld

Answer 3

我通过使用稳定版本的API解决了这个问题，例如...而不是夜间开发版本...(http://maps.google.com/maps/api/js?sensor=false)。您可以使用以下链接：http://maps.google.com/maps/api/js?v=3.2&sensor=false。请注意保留HTML标记。

- ctrlShiftBryan

---

这解决了我遇到的IE7特定问题。谢谢。 - David

好的，我通过以上方式成功解决了这个问题，但突然出现了另一个问题。还有其他人遇到过类似的问题吗？ - Piers Karsenbarg

Answer 4

我曾经遇到过同样的问题，我不得不将边距和填充都设置为0：

#map img {
    margin:0px;
    padding:0px;
}

- jkarpilo

Answer 5

我曾经遇到过类似的问题（我使用了自定义标记图像，在IE7-8中它们向左和向下偏移了1个像素）

这段代码解决了这个问题：

<!--[if IE]>
  <style>
    div#map img{
      margin-top: -1px;
      margin-left: -1px;
    }
  </style>
<![endif]-->

这里的map是Google地图API容器div的id。

- Kovge

Answer 6

对于我来说，将值四舍五入为整数

new google.maps.Size(parseInt(width), parseInt(height))
new google.maps.Point(parseInt(width)/2, parseInt(height))

- Phil

Answer 7

我尝试了上面的#map_canvas img { margin: 0px; }解决方案，但只有一半起作用。我将其更改为#map_canvas img { margin: -5px; }并应用于IE7和IE8样式表。

- davidbehan