0

我想在我的应用程序中显示谷歌地图，许多人发现这样做有问题。为了克服它，我在应用程序加载时刷新了地图，因此使用了 javascript。

此外，我将其设置为 100%，以便菜单看起来像 Android 应用程序一样稍微透明。除了带有谷歌地图的页面之外，这个相同的菜单结构在应用程序中的其他地方也可以正常工作。

在地图页面上时，我无法选择导航栏中的任何菜单按钮，并且无法导航...。我的页脚仍然有效。

我确实认为这与 Google 接管屏幕有关，所以我什至尝试更改 div 的 z-index，但没有成功。

这种想法的原因是，将鼠标移到菜单上会显示（使用 Chrome）正确的链接，但无论出于何种原因，实际的触摸/点击事件都没有被捕获并因此被执行。

作为参考，我正在使用 jquery-1.8.2 & jquery.mobile-1.2.0

Javascript

$(function () {
    // To fix the google map display issue
    // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
    // http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
    // Web Kit Browser Version Of Code   

if (navigator.userAgent.match(/Android/) || navigator.userAgent.match(/webOS/) ||     navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/BlackBerry/)) {
    var mapheight = $(window).height() - 263;
    var mapwidth = $(window).width();
    $("#map").height(mapheight);
    $("#map").width(mapwidth);
    setTimeout("initializeeventsmap()", 150);
    setTimeout("google.maps.event.trigger(map, 'resize')", 350);
    //setTimeout("map.setZoom( map.getZoom() )", 170);
    setTimeout("showResultmapjsonp()", 250);

} else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
    // PC Version Of Code
    var mapheight = $(window).height();
    var mapwidth = $(window).width();
    $("#map").height(mapheight);
    $("#map").width(mapwidth);
    setTimeout("initializeeventsmap()", 150);
    setTimeout("google.maps.event.trigger(map, 'resize')", 350);
    //setTimeout("map.setZoom( map.getZoom() )", 170);
    setTimeout("showResultmapjsonp()", 250);
};

HTML

<div data-role="page" id="eventmap" data-theme="d">
    <div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
        <div id="androidnavmenumain3" data-role="navbar" data-theme="d">
            <ul>
                <li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>

                </li>
                <li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>

                </li>
                <li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>

                </li>
                <li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>

                </li>
                <!-- <li>
                    <a href="#home" data-theme="d" data-icon="androidmore"> </a>
                </li> -->
            </ul>
        </div>
    <!-- <div id="androidnavmenu2" data-role="button" data-mini="true" data-icon="refresh"
    data-iconpos="notext" class="ui-btn-right" data-transition="fade" data-theme="d"
    style="border-width: 0px 0px 0px 0px;">Refresh Data</div> --></div>
<!--<div id="eventscontent" data-role="content" align="center"> -->
<!--<p>&nbsp;</p> -->
<div id="map" style="width:100%%; height:100%%;"></div>
<div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
    <div class="ui-block-a">
        <div id="followme" data-role="button" data-transition="fade" data-theme="d"
        data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
    </div>
    <div class="ui-block-b">
        <div id="centermap" data-role="button" data-transition="fade" data-theme="d"
        data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
    </div>
</div>
4

1 回答 1

0

答：由于 $(function () 变得混乱，在 javascript 中删除了一个额外的 showResultmapjsonp() 。

人族

于 2013-01-02T11:42:08.713 回答