【问题标题】:strage thing happening on android google map web appandroid google map web app上发生了奇怪的事情
【发布时间】:2012-10-30 19:01:22
【问题描述】:

如果您看下面,我有一个为移动设备设计的网络应用程序的部分屏幕截图。在 android 上,我得到一个奇怪的绿色形状,看起来像是一堆堆在一起的字符。我升级到冰淇淋三明治,但同样的事情正在发生。它只在我有我的地图的页面上。

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

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

更新:

我将范围缩小到 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;

对于我的徽标元素,我有以下 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,问题解决了。

【问题讨论】:

  • 很高兴你最终到达了 capdragon。将来我会记住那个文本缩进问题。 (+1)
  • 如果我没有听从你关于在不同手机上测试它的建议,就不会到达那里。这样做让我意识到它在所有页面上,而不仅仅是地图。这将可能性缩小到只有网站中常见的元素(徽标是我检查的第一件事)。

标签: android web-applications mobile google-maps-api-3


【解决方案1】:

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

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

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

让您的朋友/同事/模拟器复制该问题。如果它是间歇性的,或者仅适用于您自己的设备 - 这听起来像是流氓应用程序将文本解析为链接或类似内容的行为。了解它是哪个违规应用程序将有助于找出问题所在。

另一种选择是在样式表中查找具有深绿色 color 样式的元素。将 color 更改为粉红色,并不断缩小 CSS 选择器的范围,直到只有一个元素是粉红色的——这会让你知道这个元素来自哪里以及它是什么(我希望)。这是一个相当费力的过程。

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

【讨论】:

  • (+1)是的...有点像Skype应用程序,它可以翻译电话号码...我会调查的。但我不能使用 Firebug,因为它不会发生在我的桌面上。仅限安卓手机浏览器。我将开始逐块注释,看看它是否消失。
  • 尝试使用 Chrome Mobile 进行远程调试:developers.google.com/chrome/mobile/docs/debugging
  • 很遗憾,它没有显示在 Chrome 移动版上。仅在 Android ICS 浏览器上。
  • 已更新答案,希望对您有所帮助?
  • 非常好的建议。明天我会回复你结果
猜你喜欢
  • 1970-01-01
  • 2011-12-05
  • 2022-01-22
  • 2013-02-27
  • 2021-09-25
  • 2011-09-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多