Question

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

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

当我在地图页面上时，我无法选择导航栏中的任何菜单按钮并导航......我的页脚仍可正常工作。

我确实认为这与Google接管屏幕有关，所以我甚至尝试更改div的z-index而没有运气。

这种想法的原因是将鼠标移到菜单上会显示（使用Chrome）正确的链接，但出于某种原因，实际的触摸/点击事件不会被捕获并因此而被操作。

供参考我使用的是jquery-1.8.2＆amp; 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>

Answer 1

答案：在javascript中删除了一个额外的showResultmapjsonp（），因为$（function（）感到困惑。

人族

当Google地图在同一页面上时，持久性Jquery Mobile Navbar不起作用

1 个答案: