android - android google map web app 上发生的奇怪事情

Question

如果你看下面，我有我的为移动设备设计的网络应用程序的部分屏幕截图。在 android 上，我得到一个奇特的绿色形状，看起来像一堆字符堆叠在一起。我升级到 Ice Cream Sandwich ，但同样的事情正在发生。而且它只在我有我的 map 的页面上。

有没有人见过这样的事情或者知道是什么原因造成的？

它与深绿色森林中的“注销”链接相邻。

更新:

我将范围缩小到 Google Maps API v3。当我调用构造函数时会发生这种情况，但我仍然不知道如何修复或摆脱它。

var map = new google.maps.Map(document.getElementById('map'), {
    'zoom': 16,
    'center': new google.maps.LatLng(39.205316, -96.305485),
    'mapTypeId': google.maps.MapTypeId.HYBRID,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }, 
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    },             
    panControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }                      
});

更新#2:

尝试使用 Chrome Mobile 对其进行调试，但未显示。仅显示在 Android ICS 浏览器中。

---

解决方案:

看起来 Android ICS 浏览器不能很好地处理 CSS text-indent: -9999em;

对于我的 Logo 元素，我有以下 html:

<hgroup>
    <h1><a href="Default.aspx#main">Company Name</a></h1>
</hgroup>

/* Logo */
header hgroup {
    background: url("../imgs/logo_143x60.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 60px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 312px;
}
header hgroup h1 a {
    text-indent: -9999em;
    display: block;
    height: 60px;
    width: auto;
}
header hgroup h3  {
    text-indent: -9999em;
    height: 0;
}

我简单地删除了文本 Company Name，问题就解决了。

Answer 1

没有链接我有点盲目工作，但如果它不是直接由您的代码引起的 - 我会大胆猜测并说它可能是您设备上的应用程序的结果？例如，我知道一些卫星导航应用程序将地址转换为超链接(以打开卫星导航应用程序)。因为页面上有一张 map ，所以这个理论听起来很有道理。

在 Firebug/Web Inspector 中评估违规元素以获得更多线索。

更新在得知它只发生在 Android 浏览器中之后，我会尝试一些步骤来帮助缩小根本原因。

让您的 friend /同事/模拟器重现该问题。如果它是间歇性的，或者只适用于您自己的设备——这听起来像是流氓应用程序将文本解析为链接或类似内容的行为。了解它是哪个有问题的应用程序将有助于追踪问题所在。

另一种选择是在您的样式表中查找具有深绿色颜色 样式的元素。将 color 更改为粉红色，并不断缩小 CSS 选择器的范围，直到只有一个元素为粉红色 - 这将向您指示该元素来自何处以及它是什么(我希望).这是一个相当费力的过程。

可能有更好的方法可以在 Android 浏览器中调试类似的东西，但不幸的是我不知道它们。祝你好运!